/* ==== fonts.css ==== */
/* Invoran İpli — fontlar (sahibi: varlik ajanı; SOZLESME §5). Otomatik üretildi: qa/varlik-fontcss.mjs
Kaynak: Google Fonts CSS2 API (Inter v20, Barlow Condensed v13, Caveat v23) — SIL Open Font License 1.1.
Düzen (aile başına 3 yüz, unicode-range'ler ÇAKIŞMAZ → yalnız gereken dosya iner):
1) *-tr.woff2 Google "text=" alt kümesi: ASCII + Türkçe (ç ğ ı İ ö ş ü â î û) + tipografik işaretler + oklar.
Sayfadaki metnin tamamı bu dosyayla çizilir; ilk yüklemede aile başına TEK istek.
2) *-latin.woff2 Google latin alt kümesi EKSİ (1)'in kapsamı.
3) *-latin-ext.woff2 Google latin-ext alt kümesi EKSİ (1)'in kapsamı.
(2) ve (3) yalnız sayfaya alt kümede olmayan bir Latin karakteri girerse (ör. WordPress'ten ñ, ø, ł) iner → Türkçe/Latin eksiksiz.
Ağırlıklar (ölçüm, legacy build, qa/varlik-olcum.mjs): Inter 400/500/600/650/700/750 istenir; orijinal sitede
yalnız 400/500/600 yüzleri vardı, 650–750 isteyen 111 düğüm 600 ile çiziliyordu. Görünüm aynı kalsın diye Inter
"400 600" aralığıyla tanımlı (değişken font; 650+ → 600, yapay kalınlaştırma yok). Gerçek 700 istenirse yalnız
aşağıdaki iki "font-weight: 400 600" değerini "400 700" yapmak yeter (dosyalar değişmez, ek bayt yok).
Barlow Condensed yalnız 700 (orijinalde 400 isteyen 6 düğüm de 700 çiziliyordu). Caveat yalnız 400.
Yedek (fallback) yüzler: CLS'yi azaltmak için metrik uyumlu. Değerler tarayıcıda ölçüldü (qa/varlik-font-metrik.mjs,
Türkçe örnek metin; size-adjust = genişlik oranı, override'lar size-adjust'a bölünmüş). Kullanım:
--sans: Inter, "Inter Fallback", Arial, sans-serif
--display: 'Barlow Condensed', "Barlow Condensed Fallback", Impact, sans-serif
--hand: Caveat, "Caveat Fallback", cursive
*/
/* ==== Inter ==== */
/* Türkçe alt küme (varsayılan olarak inen tek dosya) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-var-tr.woff2) format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00B0, U+00B2-00B3, U+00B5, U+00B7, U+00BB, U+00BD, U+00C1-00C2, U+00C4, U+00C7, U+00C9-00CB, U+00CD-00CF, U+00D3-00D4, U+00D6-00D7, U+00DA-00DD, U+00E1-00E2, U+00E4, U+00E7, U+00E9-00EB, U+00ED-00EF, U+00F3-00F4, U+00F6, U+00FA-00FD, U+00FF, U+0102-0103, U+0106-010B, U+0114-0117, U+011C-0125, U+012C-012D, U+0130-0131, U+0134-0137, U+0139-013C, U+0143-0146, U+014E-014F, U+0154-0157, U+015A-015F, U+0162-0163, U+016C-016D, U+0174-017C, U+01D7-01D8, U+01F4-01F5, U+0226-0229, U+022E-022F, U+0301-0302, U+0306-0308, U+0327, U+03C0, U+1E02-1E03, U+1E08-1E0B, U+1E10-1E11, U+1E1C-1E1F, U+1E22-1E23, U+1E26-1E29, U+1E2E-1E31, U+1E3E-1E41, U+1E44-1E45, U+1E54-1E59, U+1E60-1E61, U+1E64-1E65, U+1E6A-1E6B, U+1E82-1E87, U+1E8A-1E91, U+1E97, U+1EA4-1EA5, U+1EAE-1EAF, U+1EBE-1EBF, U+1ED0-1ED1, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+20BA, U+2122, U+2161, U+2190-2194, U+2197-2198, U+21BB, U+2212, U+2248, U+2264-2265, U+25B6, U+25CF}
/* latin − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-var-latin.woff2) format("woff2");unicode-range:U+00A1-00A6, U+00A8, U+00AA, U+00AC-00AF, U+00B1, U+00B4, U+00B6, U+00B8-00BA, U+00BC, U+00BE-00C0, U+00C3, U+00C5-00C6, U+00C8, U+00CC, U+00D0-00D2, U+00D5, U+00D8-00D9, U+00DE-00E0, U+00E3, U+00E5-00E6, U+00E8, U+00EC, U+00F0-00F2, U+00F5, U+00F7-00F9, U+00FE, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-2031, U+2034-206F, U+2215, U+FEFF, U+FFFD}
/* latin-ext − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-0101, U+0104-0105, U+010C-0113, U+0118-011B, U+0126-012B, U+012E-012F, U+0132-0133, U+0138, U+013D-0142, U+0147-014D, U+0150-0153, U+0158-0159, U+0160-0161, U+0164-016B, U+016E-0173, U+017D-01D6, U+01D9-01F3, U+01F6-0225, U+022A-022D, U+0230-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0329, U+1D00-1DBF, U+1E00-1E01, U+1E04-1E07, U+1E0C-1E0F, U+1E12-1E1B, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2D, U+1E32-1E3D, U+1E42-1E43, U+1E46-1E53, U+1E5A-1E5F, U+1E62-1E63, U+1E66-1E69, U+1E6C-1E81, U+1E88-1E89, U+1E92-1E96, U+1E98-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ==== Barlow Condensed ==== */
/* Türkçe alt küme (varsayılan olarak inen tek dosya) */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-tr.woff2) format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00B0, U+00B2-00B3, U+00B5, U+00B7, U+00BB, U+00BD, U+00C1-00C2, U+00C4, U+00C7, U+00C9-00CB, U+00CD-00CF, U+00D3-00D4, U+00D6-00D7, U+00DA-00DD, U+00E1-00E2, U+00E4, U+00E7, U+00E9-00EB, U+00ED-00EF, U+00F3-00F4, U+00F6, U+00FA-00FD, U+00FF, U+0102-0103, U+0106-010B, U+0114-0117, U+011C-0125, U+012C-012D, U+0130-0131, U+0134-0137, U+0139-013C, U+0143-0146, U+014E-014F, U+0154-0157, U+015A-015F, U+0162-0163, U+016C-016D, U+0174-017C, U+01D7-01D8, U+01F4-01F5, U+0226-0229, U+022E-022F, U+0301-0302, U+0306-0308, U+0327, U+03C0, U+1E02-1E03, U+1E08-1E0B, U+1E10-1E11, U+1E1C-1E1F, U+1E22-1E23, U+1E26-1E29, U+1E2E-1E31, U+1E3E-1E41, U+1E44-1E45, U+1E54-1E59, U+1E60-1E61, U+1E64-1E65, U+1E6A-1E6B, U+1E82-1E87, U+1E8A-1E91, U+1E97, U+1EA4-1EA5, U+1EAE-1EAF, U+1EBE-1EBF, U+1ED0-1ED1, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+20BA, U+2122, U+2161, U+2190-2194, U+2197-2198, U+21BB, U+2212, U+2248, U+2264-2265, U+25B6, U+25CF}
/* latin − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-latin.woff2) format("woff2");unicode-range:U+00A1-00A6, U+00A8, U+00AA, U+00AC-00AF, U+00B1, U+00B4, U+00B6, U+00B8-00BA, U+00BC, U+00BE-00C0, U+00C3, U+00C5-00C6, U+00C8, U+00CC, U+00D0-00D2, U+00D5, U+00D8-00D9, U+00DE-00E0, U+00E3, U+00E5-00E6, U+00E8, U+00EC, U+00F0-00F2, U+00F5, U+00F7-00F9, U+00FE, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-2031, U+2034-206F, U+2215, U+FEFF, U+FFFD}
/* latin-ext − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-0101, U+0104-0105, U+010C-0113, U+0118-011B, U+0126-012B, U+012E-012F, U+0132-0133, U+0138, U+013D-0142, U+0147-014D, U+0150-0153, U+0158-0159, U+0160-0161, U+0164-016B, U+016E-0173, U+017D-01D6, U+01D9-01F3, U+01F6-0225, U+022A-022D, U+0230-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0329, U+1D00-1DBF, U+1E00-1E01, U+1E04-1E07, U+1E0C-1E0F, U+1E12-1E1B, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2D, U+1E32-1E3D, U+1E42-1E43, U+1E46-1E53, U+1E5A-1E5F, U+1E62-1E63, U+1E66-1E69, U+1E6C-1E81, U+1E88-1E89, U+1E92-1E96, U+1E98-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ==== Caveat ==== */
/* Türkçe alt küme (varsayılan olarak inen tek dosya) */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-400-tr.woff2) format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00B0, U+00B2-00B3, U+00B5, U+00B7, U+00BB, U+00BD, U+00C1-00C2, U+00C4, U+00C7, U+00C9-00CB, U+00CD-00CF, U+00D3-00D4, U+00D6-00D7, U+00DA-00DD, U+00E1-00E2, U+00E4, U+00E7, U+00E9-00EB, U+00ED-00EF, U+00F3-00F4, U+00F6, U+00FA-00FD, U+00FF, U+0102-0103, U+0106-010B, U+0114-0117, U+011C-0125, U+012C-012D, U+0130-0131, U+0134-0137, U+0139-013C, U+0143-0146, U+014E-014F, U+0154-0157, U+015A-015F, U+0162-0163, U+016C-016D, U+0174-017C, U+01D7-01D8, U+01F4-01F5, U+0226-0229, U+022E-022F, U+0301-0302, U+0306-0308, U+0327, U+03C0, U+1E02-1E03, U+1E08-1E0B, U+1E10-1E11, U+1E1C-1E1F, U+1E22-1E23, U+1E26-1E29, U+1E2E-1E31, U+1E3E-1E41, U+1E44-1E45, U+1E54-1E59, U+1E60-1E61, U+1E64-1E65, U+1E6A-1E6B, U+1E82-1E87, U+1E8A-1E91, U+1E97, U+1EA4-1EA5, U+1EAE-1EAF, U+1EBE-1EBF, U+1ED0-1ED1, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+20BA, U+2122, U+2161, U+2190-2194, U+2197-2198, U+21BB, U+2212, U+2248, U+2264-2265, U+25B6, U+25CF}
/* latin − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-400-latin.woff2) format("woff2");unicode-range:U+00A1-00A6, U+00A8, U+00AA, U+00AC-00AF, U+00B1, U+00B4, U+00B6, U+00B8-00BA, U+00BC, U+00BE-00C0, U+00C3, U+00C5-00C6, U+00C8, U+00CC, U+00D0-00D2, U+00D5, U+00D8-00D9, U+00DE-00E0, U+00E3, U+00E5-00E6, U+00E8, U+00EC, U+00F0-00F2, U+00F5, U+00F7-00F9, U+00FE, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-2031, U+2034-206F, U+2215, U+FEFF, U+FFFD}
/* latin-ext − alt küme (yalnız gerekirse iner) */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-0101, U+0104-0105, U+010C-0113, U+0118-011B, U+0126-012B, U+012E-012F, U+0132-0133, U+0138, U+013D-0142, U+0147-014D, U+0150-0153, U+0158-0159, U+0160-0161, U+0164-016B, U+016E-0173, U+017D-01D6, U+01D9-01F3, U+01F6-0225, U+022A-022D, U+0230-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0329, U+1D00-1DBF, U+1E00-1E01, U+1E04-1E07, U+1E0C-1E0F, U+1E12-1E1B, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2D, U+1E32-1E3D, U+1E42-1E43, U+1E46-1E53, U+1E5A-1E5F, U+1E62-1E63, U+1E66-1E69, U+1E6C-1E81, U+1E88-1E89, U+1E92-1E96, U+1E98-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ==== Metrik uyumlu yedek yüzler (yerel sistem fontu; indirme yok) ==== */
/* Inter → Arial (normal) ve Arial Bold (600+) */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:100 500;size-adjust:105.89%;ascent-override:91.51%;descent-override:22.76%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;size-adjust:101.15%;ascent-override:95.80%;descent-override:23.83%;line-gap-override:0%}
/* Barlow Condensed 700 → Arial Narrow Bold varsa o (sonra tanımlanan önce denenir), yoksa Arial Bold.
Bulunamayan local() yüzünün atlanıp aynı ailedeki önceki yüze geçildiği Edge/Chromium'da ölçüldü. */
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:100 900;size-adjust:68.85%;ascent-override:145.25%;descent-override:29.05%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:100 900;size-adjust:83.97%;ascent-override:119.09%;descent-override:23.82%;line-gap-override:0%}
/* Caveat → Comic Sans MS (Windows/macOS'ta "cursive" zaten budur; burada yalnız ölçüsü Caveat'e uyduruldu) */
@font-face{font-family:"Caveat Fallback";src:local("Comic Sans MS"),local("ComicSansMS");font-weight:100 900;size-adjust:71.78%;ascent-override:133.75%;descent-override:41.80%;line-gap-override:0%}
/* ==== tokens.css ==== */
/* ==========================================================================
Invoran İpli — tasarım token'ları (tek :root)
Değerler orijinal ipli CSS'in hesaplanmış (geçerli) değerlerinden alındı.
Yalnız bu dosya :root'ta özel özellik tanımlar; bölümler token'ı EZMEZ
(eski .distribution kapsamındaki --blue/--paper/--ink/--muted ezmesi kaldırıldı).
========================================================================== */
:root {
/* --- Palet --- */
--blue: #2052eb; /* birincil marka mavisi (bağlantı, buton, vurgu) */
--blue-deep: #173fab; /* buton hover */
--electric: #2044ff; /* elektrik mavisi: "Tek içerik. Tüm kanallar." zemini, ip vurgusu */
--navy: #101f42; /* lacivert bölüm zemini (video vitrini, #emre) */
--ink: #102143; /* gövde metni / koyu başlık */
--ink-deep: #111a2d; /* "FARKI AÇIN." dev başlık */
--ice: #edf2ff; /* buz mavisi bölüm zemini */
--pale: #e9efff; /* açık mavi yüzey (monogram, avatar) */
--paper: #f7f9fe; /* sayfa zemini */
--paper-warm: #fffef9; /* kanal kartları (mavi bölüm) */
--white: #fff;
--muted: #57647a; /* ikincil metin (beyaz/açık zeminde ≥ 5.6:1) */
--muted-strong: #4a5568; /* küçük gri etiketler (≥ 7:1) */
--line: #dce3ed; /* kenarlık tonu */
--line-blue: #c9d8f3; /* mavi tonlu kart kenarlığı */
--on-dark: #f1f5ff; /* lacivert zeminde metin */
--on-dark-muted: #b2c3e2; /* lacivert zeminde ikincil metin (≥ 8:1) */
--on-dark-accent: #92b3ff;/* lacivert zeminde vurgulu başlık satırı */
--on-blue: #fff; /* elektrik mavisi zeminde metin */
--on-blue-soft: #e7edff; /* elektrik mavisi zeminde gövde metni (≥ 5.3:1) */
--focus: var(--blue);
--focus-on-dark: #fff;
/* --- Tipografi --- */
--sans: Inter, "Inter Fallback", Arial, sans-serif;
--display: 'Barlow Condensed', "Barlow Condensed Fallback", Impact, sans-serif;
--hand: Caveat, "Caveat Fallback", cursive;
/* 8 adımlı ölçek (12/14/16/20/28/40/72/96) + bölüm kapısı */
--fs-1: .75rem; /* 12px — en küçük etiket (min) */
--fs-2: .875rem; /* 14px */
--fs-3: 1rem; /* 16px */
--fs-4: 1.25rem; /* 20px */
--fs-5: 1.75rem; /* 28px */
--fs-6: 2.5rem; /* 40px */
--fs-7: 4.5rem; /* 72px */
--fs-8: 6rem; /* 96px */
--fs-h2: clamp(3.1rem, 6.5vw, 6.8rem); /* bölüm başlığı (orijinal ölçek) */
--fs-h2-mobile: clamp(2.8rem, 11.5vw, 4.6rem);
--fs-gate: clamp(5rem, 15.2vw, 13.7rem); /* bölüm kapısı: FARKI AÇIN. */
/* Barlow başlıklar: Ş/Ç çengeli ile alt satır İ/Ü/Ö noktası arası ≥ 3px (ölçüm: qa/css-gates.mjs).
Orijinal .97 idi (−12,2px çakışma). Satır yüksekliği + iki satırlı kalıpta ikinci satıra ek boşluk. */
--lh-display: .99;
--display-line-gap: .05em;
--tracking-display: -.015em;
--tracking-label: .14em;
/* --- Boşluk (8pt) --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 88px; /* bölüm dikey boşluğu (masaüstü) */
--section-pad: 88px;
--section-pad-m: 58px;
/* --- Köşe, kenarlık, gölge --- */
--radius: 14px; /* kart */
--radius-lg: 20px; /* büyük kart / bölüm kabı */
--radius-sm: 9px; /* buton */
--radius-xs: 7px; /* input, küçük düğme */
--radius-pill: 100px;
--shadow-1: 0 8px 18px rgb(16 33 67 / .06); /* küçük öğe, buton */
--shadow-2: 0 25px 60px -22px rgb(16 33 67 / .22); /* kart */
--shadow-3: 0 35px 130px rgb(16 32 68 / .27); /* pencere */
--shadow-blue: 0 10px 25px rgb(32 82 235 / .17); /* mavi buton / öne çıkan kart */
/* --- Hareket --- */
--ease: cubic-bezier(.2, .7, .2, 1); /* tek easing eğrisi */
--dur-1: .2s;
--dur-2: .35s;
--dur-3: .65s;
/* --- Izgara, konteyner, ip --- */
--container: 1180px;
--container-wide: 1240px; /* ≥ 1600px */
--gutter: 120px; /* .wrap yan boşluk toplamı (masaüstü) */
--wrap: min(var(--container), calc(100% - var(--gutter)));
/* İp şeridi: içeriğin solundan ipin eksenine uzaklık. JS ipi .wrap kutusundan − thread-offset ile çizer. */
--thread-offset: 32px;
--thread-gap: 24px; /* ip ile içerik arası en az (masaüstü) */
--thread-gap-m: 14px; /* mobil */
--thread-lane: calc((100vw - min(var(--container), 100vw - var(--gutter))) / 2 - var(--thread-offset));
--thread-cross: 57px; /* bölüm başındaki yatay ip geçişinin yüksekliği */
/* --- Header --- */
--header-h: 76px;
--header-h-scrolled: 64px;
--header-h-m: 64px;
--mobile-bar-h: 64px;
--z-thread: 1;
--z-content: 2;
--z-header: 50;
--z-mobile-bar: 60;
--z-progress: 100;
}
@media (min-width: 1600px) {
:root { --container: var(--container-wide); }
}
@media (max-width: 1100px) {
:root { --gutter: 90px; }
}
@media (max-width: 800px) {
/* Entegrasyon (26 Eylül): 64 → 72. 9 px çizgiyle 32 px yan boşlukta ip–içerik ≥ 24 px (§8) fiziksel olarak mümkün değildi. */
:root { --gutter: 72px; }
}
@media (max-width: 580px) {
/* Entegrasyon: --thread-offset 17 → 18 (hero başlangıç kıvrımında ip–içerik ≥ 14 px; sağda ip görünüm kenarının 4,5 px içinde kalır) */
:root { --gutter: 46px; --thread-offset: 18px; --lh-display: 1.02; }
}
/* ==== base.css ==== */
/* ==========================================================================
Temel öğe stilleri (sıfırlama, tipografi, odak)
========================================================================== */
:root {
color-scheme: light;
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
font-synthesis: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* sabit header (kaydırılmış hâli 64px) + nefes payı */
scroll-padding-top: calc(var(--header-h-scrolled) + 24px);
}
body {
position: relative;
margin: 0;
overflow-x: clip;
}
button,
a,
input,
textarea,
select {
-webkit-tap-highlight-color: transparent;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a {
touch-action: manipulation;
}
button {
color: inherit;
cursor: pointer;
}
button:disabled {
cursor: default;
}
a {
color: inherit;
text-decoration: none;
}
img,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
button img {
width: 100%;
}
figure,
blockquote,
p,
h1,
h2,
h3,
h4 {
margin: 0;
}
p {
font-size: 1rem;
line-height: 1.65;
}
ul,
ol {
margin: 0;
padding: 0;
}
summary {
list-style: none;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
/* --- Başlıklar ---
Barlow Condensed büyük harf başlıklarda üst satırdaki Ş/Ç çengeli ile alt satırdaki İ/Ü/Ö noktası
çakışmasın diye (denetim: −12,2px) satır yüksekliği .97 → var(--lh-display) ve iki satırlı kalıpta
(ÜST
ALT) ikinci satır bloğuna ek üst boşluk. Ölçüm: qa/css-gates.mjs (≥ 3px). */
h1,
h2 {
font-family: var(--display);
font-weight: 700;
letter-spacing: var(--tracking-display);
line-height: var(--lh-display);
}
h2 {
font-size: var(--fs-h2);
}
h1 span,
h2 span {
color: var(--blue);
}
h2 > br + span {
display: inline-block;
margin-top: var(--display-line-gap);
}
h3 {
font-size: clamp(1.5rem, 2.3vw, 2.1rem);
font-weight: 650;
line-height: 1.12;
letter-spacing: -.035em;
}
/* --- Odak --- */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 5px;
}
/* koyu / mavi zeminli bölümlerde beyaz halka (≥ 3:1) */
.video-section :focus-visible,
.distribution :focus-visible,
.about :focus-visible,
.price-card--service :focus-visible {
outline-color: var(--focus-on-dark);
}
@media (max-width: 580px) {
html {
scroll-padding-top: calc(var(--header-h-m) + 12px);
}
h2 {
font-size: var(--fs-h2-mobile);
}
h3 {
font-size: 1.6rem;
}
}
/* ---- Başlık satırları (ui/reveal.js → inv-line/inv-li; yalnız hareket açıkken) ----
Taşma gizli ama Türkçe aksanlar (İ Â Ü) ve çengeller (Ş Ç) kırpılmasın diye iç boşluk + eşit negatif kenar. */
inv-line {
display: block;
overflow: hidden;
padding: .2em .1em .22em;
margin: -.2em -.1em -.22em;
}
inv-line + inv-line {
margin-top: calc(var(--display-line-gap, 0px) - .2em);
}
inv-li {
display: block;
transform-origin: 0 100%;
}
/* ==== layout.css ==== */
/* ==========================================================================
Yerleşim: konteyner, bölüm ritmi, bölüm girişi, taşma güvenliği
Konteyner token'ları tokens.css'te (--container, --gutter, --wrap). İp şeridi JS'te .wrap
kutusundan hesaplanır; tüm bölümler (paylaşım dahil) aynı .wrap'ı kullanır.
========================================================================== */
.wrap {
position: relative;
width: var(--wrap);
margin-inline: auto;
}
.scene-section {
position: relative;
}
.scene-section:not(.hero) {
padding-block: var(--section-pad);
}
.scene-section > .wrap {
z-index: var(--z-content);
}
.section-intro {
max-width: 880px;
margin-bottom: 44px;
}
.section-intro h2 {
letter-spacing: -.01em;
}
.section-intro > p:not(.eyebrow) {
max-width: 550px;
margin-top: 24px;
font-size: 1.02rem;
color: var(--muted);
}
.section-intro .text-link {
margin-top: 22px;
}
/* Izgara öğeleri görünüm alanıyla ve büyütülmüş yazıyla küçülebilsin */
main *,
dialog *,
.site-footer * {
min-width: 0;
}
main :is(h1, h2, h3, p, li, a, button, span, strong),
dialog :is(h2, h3, p, a, button),
.site-footer :is(p, a, span) {
overflow-wrap: anywhere;
}
@media (max-width: 800px) {
.section-intro {
margin-bottom: 34px;
}
}
@media (max-width: 580px) {
/* Entegrasyon (26 Eylül): 29/17 yerine iki yanda 23 px. Sağdaki ip ekseni görünüm kenarına kırpıldığı için
ip–içerik mesafesi 10 px kalıyordu (§8: mobil ≥ 14). İçerik genişliği aynı (100% − 46px). */
.wrap {
width: calc(100% - 46px);
margin-left: 23px;
margin-right: 23px;
}
.scene-section:not(.hero) {
padding-block: var(--section-pad-m);
}
.section-intro {
margin-bottom: 30px;
}
.section-intro > p:not(.eyebrow) {
margin-top: 18px;
}
}
/* ==== components.css ==== */
/* ==========================================================================
Ortak bileşenler: eyebrow, buton, metin bağlantısı, yuvarlak düğme, küçük notlar, monogram
========================================================================== */
.eyebrow {
margin-bottom: 16px;
font-size: .77rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--tracking-label);
color: var(--muted);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 18px;
min-height: 44px;
padding: 7px 0;
background: none;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
font-size: .9rem;
font-weight: 600;
color: var(--blue);
text-align: left;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 25px;
min-height: 52px;
padding: 16px 24px;
border: 1px solid var(--blue);
border-radius: var(--radius-sm);
background: var(--blue);
color: #fff;
font-size: .94rem;
font-weight: 600;
line-height: 1.3;
box-shadow: 0 6px 18px rgb(35 85 214 / .1);
transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.button:hover {
background: var(--blue-deep);
transform: translateY(-2px);
}
.button:active {
transform: translateY(1px);
}
.button.compact {
min-height: 44px;
padding: 12px 20px;
font-size: .86rem;
}
/* ikincil (çerçeveli) buton — eğitim fiyat kartı vb. */
.button--ghost {
background: #fff;
color: var(--blue);
box-shadow: none;
}
.button--ghost:hover {
background: var(--ice);
}
.circle-button {
flex-shrink: 0;
width: 48px;
height: 48px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 15px rgb(23 57 130 / .03);
font-size: 1.6rem;
}
.circle-button:hover {
border-color: var(--blue);
color: var(--blue);
}
.full-note,
.fine-print,
.detail-note {
font-size: .8rem;
line-height: 1.6;
color: var(--muted);
}
.tool-monogram {
display: grid;
place-items: center;
width: 47px;
height: 47px;
border-radius: 12px;
background: var(--pale);
color: var(--blue);
font-size: 1rem;
font-weight: 700;
letter-spacing: -.06em;
}
/* dipnot işareti (hero kimlik satırı → #kimlik-dipnot): görünür işaret küçük, dokunma alanı 44px
(dolgu + negatif kenar boşluğu satırı büyütmez) */
.footnote-ref {
display: inline-block;
min-width: 44px;
min-height: 44px;
margin: -14px -14px -14px -12px;
padding: 10px 14px 10px 12px;
color: var(--blue);
font-size: max(.75rem, .8em);
font-weight: 700;
line-height: 24px;
text-align: left;
vertical-align: top;
}
@media (max-width: 580px) {
.eyebrow {
margin-bottom: 12px;
font-size: .75rem;
}
.tool-monogram {
width: 43px;
height: 43px;
}
}
/* ==== header-footer.css ==== */
/* ==========================================================================
Header (sabit), okuma çubuğu, atlama bağlantısı, footer, mobil alt bar
SOZLESME §6.1: .site-header sabit; html.is-scrolled'da 64px, buz mavisi yarı saydam + blur.
§6.2: nav.mobile-bar yalnız < 700px, JS .is-visible ekler; safe-area.
========================================================================== */
.skip {
position: fixed;
top: 8px;
left: 8px;
z-index: 999;
padding: 15px;
background: #fff;
transform: translateY(-150%);
}
.skip:focus {
transform: none;
}
.read-progress {
position: fixed;
inset: 0 0 auto;
z-index: var(--z-progress);
height: 3px;
background: linear-gradient(90deg, var(--blue), #90b2ff);
transform: scaleX(0);
transform-origin: left;
}
/* Header kutusu akıştan çıktığı için yeri body'de ayrılır: sayfanın üst düzeni orijinalle aynı kalır. */
body {
padding-top: var(--header-h);
}
.site-header {
--header-pad: max(40px, calc((100% - 1320px) / 2));
position: fixed;
inset: 0 0 auto;
z-index: var(--z-header);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: var(--header-h);
padding-inline: var(--header-pad);
/* üstte sayfa zeminiyle aynı ton (görünmez); JS olmasa da içerik üstünde okunur kalır */
background: rgb(247 249 254 / .9);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
transition: height var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* alt çizgi: içerik genişliğinde (orijinaldeki 1320px'lik kutunun kenarlığı) */
.site-header::after {
content: "";
position: absolute;
inset: auto var(--header-pad) 0;
height: 1px;
background: var(--line);
transition: opacity var(--dur-2) var(--ease);
}
html.is-scrolled .site-header {
height: var(--header-h-scrolled);
background: rgb(237 242 255 / .84);
box-shadow: 0 1px 0 rgb(16 33 67 / .06), 0 10px 30px -18px rgb(16 33 67 / .25);
}
html.is-scrolled .site-header::after {
opacity: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
background: rgb(247 249 254 / .98);
}
html.is-scrolled .site-header {
background: rgb(237 242 255 / .98);
}
}
.brand {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 1.65rem;
font-weight: 750;
letter-spacing: -.055em;
}
.brand svg {
width: 35px;
height: 35px;
color: var(--blue);
}
.site-header .brand {
min-height: 44px;
}
.site-header nav {
display: flex;
align-items: center;
gap: 28px;
}
.site-header nav a {
position: relative;
padding-block: 14px;
font-size: .94rem;
color: var(--muted);
}
.site-header nav a:hover,
.site-header nav a[aria-current="true"] {
color: var(--blue);
}
/* aktif bölüm: ince ip çizgisi */
.site-header nav a::after {
content: "";
position: absolute;
inset: auto 0 6px;
height: 2px;
border-radius: 2px;
background: var(--electric);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-2) var(--ease);
}
.site-header nav a[aria-current="true"]::after {
transform: scaleX(1);
}
.menu-toggle {
display: none;
}
/* Header CTA: geniş ekranda uzun, dar ekranda kısa metin */
.site-header .cta-short {
display: none;
}
/* --- Footer --- */
.site-footer {
z-index: 2;
padding: 35px 0 28px;
}
.site-footer .brand {
align-self: start;
min-height: 44px;
font-size: 2rem;
}
/* 27 Eylül: header'daki iki köşeli işaret, footer yazı boyuna oranlı */
.site-footer .brand svg {
flex: none;
width: 40px;
height: 40px;
}
.footer-top {
display: grid;
grid-template-columns: .8fr 1fr 1.5fr;
gap: 35px;
padding-bottom: 35px;
border-bottom: 1px solid var(--line);
}
.footer-top p {
font-size: .94rem;
color: var(--muted);
}
.footer-top nav {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-end;
gap: 0 23px;
font-size: .85rem;
}
/* dokunma hedefi ≥ 44px (görsel tipografi aynı) */
.footer-top nav a,
.footer-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 24px;
padding-block: 10px;
border-bottom: 1px solid var(--line);
font-size: .85rem;
}
.footer-place {
font-size: .85rem;
color: var(--muted);
}
.footer-links,
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0 23px;
list-style: none;
}
.footer-links a:hover,
.footer-top nav a:hover {
color: var(--blue);
}
.footer-links {
align-items: center;
gap: 8px 10px;
}
/* 27 Eylül: iletişim hapları (telefon + WhatsApp) — simge + metin, 44 px dokunma alanı */
.footer-links a.footer-pill {
gap: 8px;
padding: 0 17px 0 14px;
border: 1px solid var(--line-blue);
border-radius: 999px;
background: #fff;
color: var(--ink);
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.footer-pill .ic {
flex: none;
width: 17px;
height: 17px;
color: var(--blue);
}
.footer-links a.footer-pill:hover,
.footer-links a.footer-pill:focus-visible {
border-color: var(--blue);
background: rgb(32 82 235 / .06);
color: var(--blue);
}
.footer-social {
align-items: center;
gap: 0 4px;
}
/* 27 Eylül: sosyal ikonlar — 44 px dokunma alanı; adres yoksa soluk yer tutucu (tıklanmaz) */
.footer-social__item {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--ink);
transition: color .2s ease, background-color .2s ease;
}
a.footer-social__item:hover,
a.footer-social__item:focus-visible {
color: var(--blue);
background: rgb(32 82 235 / .07);
}
.footer-social__item.is-placeholder {
color: var(--muted);
opacity: .55;
cursor: default;
}
.footer-social .ic {
width: 20px;
height: 20px;
}
/* Geniş ekranda iletişim bağlantıları + sosyal ikonlar sağda bir arada (yer bilgisi solda) */
@media (min-width: 701px) {
.footer-contact {
justify-content: flex-start;
}
.footer-links {
margin-left: auto;
}
}
/* 27 Eylül: © solda; bağlantılar sağda, aralarında eşit boşluk */
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 28px;
padding-top: 10px;
}
.footer-bottom > span {
margin-right: auto;
font-size: .75rem;
color: var(--muted);
}
.footer-bottom .text-link {
min-height: 44px;
border: 0;
font-size: .75rem;
color: var(--muted);
}
.footer-bottom .text-link:hover {
color: var(--blue);
}
/* 27 Eylül: slogan (content/site.json → slogan). Dev INVORAN'ın üstünde, ayrı öğe:
.footer-giant kutusuna dokunmaz; negatif alt boşluk .footer-giant'ın üst boşluğuyla birleşir (kardeş margin çöküşü). */
.site-footer .footer-slogan {
margin: 34px 0 calc(16px - clamp(26px, 4vw, 60px));
font-family: var(--display);
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: .16em;
text-align: center;
text-transform: uppercase;
color: var(--blue);
}
.noscript-help {
padding: 20px;
background: #fff;
color: var(--ink);
text-align: center;
}
.noscript-help a {
color: var(--blue);
text-decoration: underline;
}
/* --- Mobil alt bar (§6.2) --- */
.mobile-bar {
display: none;
}
@media (max-width: 1100px) {
.site-header {
--header-pad: 30px;
}
.site-header nav {
gap: 17px;
}
.site-header .cta-long {
display: none;
}
.site-header .cta-short {
display: inline;
}
}
@media (max-width: 800px) {
.site-header {
--header-pad: 20px;
}
.site-header nav {
display: none;
position: absolute;
top: calc(100% + 4px);
left: calc(var(--header-pad) - 5px);
right: calc(var(--header-pad) - 5px);
padding: 15px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgb(20 35 61 / .08);
}
.site-header nav.open {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-header nav a {
padding: 13px 15px;
}
.site-header nav a::after {
inset: 8px auto 8px 0;
width: 3px;
height: auto;
transform: scaleY(0);
transform-origin: top;
}
.site-header nav a[aria-current="true"]::after {
transform: scaleY(1);
}
.menu-toggle {
display: block;
min-width: 44px;
min-height: 44px;
margin-left: auto;
padding: 10px;
background: none;
border: 0;
font-size: .85rem;
}
.site-header > .compact {
padding: 10px 13px;
font-size: .8rem;
}
.brand {
font-size: 1.5rem;
}
.brand svg {
width: 29px;
height: 29px;
}
.footer-top {
grid-template-columns: 1fr 1fr;
}
.footer-top nav {
grid-column: 1 / -1;
justify-content: flex-start;
}
.footer-bottom {
flex-wrap: wrap;
justify-content: flex-start;
gap: 0 22px;
}
.footer-bottom .text-link {
min-height: 44px;
}
}
@media (max-width: 699px) {
.mobile-bar {
position: fixed;
inset: auto 0 0;
z-index: var(--z-mobile-bar);
display: flex;
align-items: center;
gap: 10px;
padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
background: rgb(247 249 254 / .9);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border-top: 1px solid var(--line);
box-shadow: 0 -10px 30px -18px rgb(16 33 67 / .3);
transform: translateY(calc(100% + 2px));
visibility: hidden;
transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.mobile-bar.is-visible {
transform: none;
visibility: visible;
transition: transform var(--dur-2) var(--ease), visibility 0s;
}
.mobile-bar__primary {
flex: 1 1 auto;
min-height: 48px;
padding: 12px 16px;
font-size: .9rem;
}
.mobile-bar__call {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 72px;
min-height: 48px;
padding: 12px 16px;
border: 1px solid var(--blue);
border-radius: var(--radius-sm);
background: #fff;
color: var(--blue);
font-size: .9rem;
font-weight: 600;
}
/* bar görünürken sayfa sonu (footer) barın altında kalmasın */
body {
padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
}
}
@media (max-width: 580px) {
body {
padding-top: var(--header-h-m);
}
.site-header {
--header-pad: 17px;
gap: 8px;
height: var(--header-h-m);
}
html.is-scrolled .site-header {
height: var(--header-h-m);
}
.brand {
font-size: 1.4rem;
}
.site-header .brand {
flex: 0 1 auto;
min-width: 0;
}
.site-header > .compact {
margin-left: 0;
padding: 10px 12px;
font-size: .81rem;
white-space: nowrap;
}
.site-footer {
padding-top: 25px;
/* Entegrasyon: ipin son kıvrımı footer'ın alt satırına ≥ 14 px uzak kalsın (§8) */
padding-bottom: 76px;
}
.site-footer .brand {
font-size: 1.5rem;
flex-wrap: wrap;
}
.footer-top {
gap: 20px;
}
.footer-top p {
font-size: .84rem;
}
.footer-top nav {
gap: 0 22px;
font-size: .82rem;
}
.footer-bottom {
gap: 0 16px;
}
.footer-bottom .text-link {
font-size: .75rem;
}
}
/* 320–360: tek satır header (logo + Menü + Görüşelim) */
@media (max-width: 360px) {
.site-header {
--header-pad: 12px;
gap: 4px;
}
.brand {
gap: 5px;
font-size: 1.25rem;
}
.brand svg {
width: 26px;
height: 26px;
}
.menu-toggle {
padding: 8px 6px;
}
.site-header > .compact {
padding: 10px;
gap: 0;
}
}
/* --- 27 Eylül: footer mobil düzeni (≤ 700 px) --- */
@media (max-width: 700px) {
/* menü: iki sütunlu ızgara (her bağlantı sütun genişliğinde, 44 px yüksek) */
.footer-top nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
}
/* alt satır iki satır: üstte yasal bağlantılar, altta © + Başa dön (odak sırası = görsel sıra) */
.footer-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"privacy motion"
"copy totop";
align-items: center;
gap: 0 16px;
}
.footer-bottom > span {
grid-area: copy;
margin-right: 0;
}
.footer-bottom #privacy-open {
grid-area: privacy;
justify-self: start;
text-align: left;
}
.footer-bottom #motion-toggle {
grid-area: motion;
justify-self: end;
}
.footer-bottom .footer-totop {
grid-area: totop;
justify-self: end;
}
.site-footer .footer-slogan {
margin-top: 26px;
}
}
@media (max-width: 580px) {
.site-footer .brand svg {
width: 30px;
height: 30px;
}
}
/* Dev INVORAN'ın altındaki boşluk (mobil) = düğüm payı (.footer-giant 24 px + footer 76 px; düğüm 72 px, thread.js footerKnot)
+ body'deki alt bar payı (64 px). Bar sayfa sonunda çoğu telefonda gizli (#gorusme hâlâ görünür) → pay boş kalıyordu.
Pay yalnız bar görünürken durur; pencere açıkken korunur (kapanınca kaydırma sıçramasın). :has() yoksa pay hep durur. */
@media (max-width: 699px) {
body:has(.mobile-bar:not(.is-visible)):not(:has(dialog[open])) {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ==== forms.css ==== */
/* ==========================================================================
Formlar: genel alanlar, iletişim formu (§6.6), eğitim örneği alanları
Radyo grubu segment kontrol olarak çizilir (girdi görünmez ama odaklanabilir ve zorunluluk
doğrulaması çalışır); ad / dönüş alanları, onay satırı.
========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%;
min-width: 0;
padding: 12px;
border: 1px solid #c8d3e1;
border-radius: var(--radius-xs);
background: #f8fafd;
color: var(--ink);
font-size: 1rem;
}
input::placeholder,
textarea::placeholder {
color: #6b7789;
opacity: 1;
}
textarea {
resize: vertical;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #aac1ff;
outline-offset: 2px;
}
.full-fields label,
.need-label {
display: grid;
gap: 7px;
font-size: .88rem;
font-weight: 600;
}
/* iletişim formunda etiket alanı sarmaz (for= ile bağlı): tek satır metin + isteğe bağlı notu */
#contact-form .need-label {
display: block;
}
.need-label span {
font-weight: 400;
color: var(--muted);
}
/* --- İletişim formu --- */
#contact-form fieldset {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 25px 0 20px;
padding: 0;
border: 0;
}
#contact-form legend {
margin-bottom: 12px;
padding: 0;
font-size: .94rem;
font-weight: 600;
}
/* segment kontrol */
#contact-form fieldset label {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin-left: -1px;
padding: 8px 10px;
border: 1px solid #c8d3e1;
background: #fff;
font-size: .91rem;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
#contact-form fieldset label:first-of-type {
margin-left: 0;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
#contact-form fieldset label:last-of-type {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
#contact-form fieldset label:hover {
z-index: 1;
border-color: var(--blue);
color: var(--blue);
}
#contact-form fieldset label:has(input:checked) {
z-index: 1;
border-color: var(--blue);
background: var(--blue);
color: #fff;
}
#contact-form fieldset label:has(input:focus-visible) {
z-index: 2;
outline: 3px solid #aac1ff;
outline-offset: 2px;
}
#contact-form input[type="radio"] {
position: absolute;
inset: 50% auto auto 50%;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
#contact-name,
#contact-reply {
margin: 8px 0 18px;
}
#contact-need {
margin: 8px 0 19px;
}
.form-consent {
margin: 4px 0 18px;
font-size: .8rem;
line-height: 1.6;
color: var(--muted);
}
/* satır içi bağlantı: tipografi satırı bozmaz, tıklama alanı dikeyde büyür */
.form-consent .text-link {
display: inline;
min-height: 0;
padding: 12px 0;
border: 0;
font-size: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
#contact-hint {
margin-top: 15px;
}
@media (max-width: 580px) {
#contact-form fieldset label {
padding-inline: 6px;
font-size: .85rem;
}
#contact-form .button {
width: 100%;
}
}
/* ==== dialogs.css ==== */
/* ==========================================================================
Pencereler (native