/* ========================================================================== wy9 — kurucu-onde ana sayfa. docs/09_SAYFA_TASARIM_KARARI.md uygulamasi. ADDITIVE KURULUM: her sey `.wy9` kapsayicisinin altinda tanimli. style.css'e ve diger 170 sayfaya DOKUNULMAZ. Boylece bu sayfa, emekli edilmemis V6/V7 kusaklariyla ayni dosyada yan yana yasar. Tema: her sayfanin 'indeki erken script data-theme'i DAIMA set eder (varsayilan "light"), bu yuzden token'lar attribute secicilerine baglandi. prefers-color-scheme blogu yalnizca guvenlik agi. Kontrast: butun degerler build/check-contrast.js tarafindan olculur ve ihlalde build kirilir. Elle "AA gecer" yazilmaz, olculur. ========================================================================== */ .wy9{ /* --- kagit --- */ --paper:#F4F1E8; --paper-raised:#FCFAF3; --paper-sunken:#ECE8DB; /* --- murekkep --- */ /* ink-faint mirasta #6E6A5E idi; cukur bantta 4.41 dusuyordu. Tuzagi CSS disipliniyle ortmek yerine token guvenli hale getirildi: #6c685d ile kagit 4.92 / kabartma 5.33 / cukur 4.54 — uc zeminde de AA. */ --ink:#26241E; --ink-soft:#57534A; --ink-faint:#6c685d; --hairline:rgba(38,36,30,.16); --hairline-strong:rgba(38,36,30,.32); /* --- vurgu --- */ --accent:#3B6E5C; --accent-deep:#2C5646; --stamp:#A63D40; --terminal-bg:#171C1A; --terminal-ink:#E6EDE8; /* --- departman murekkepleri --- */ --d-ops:#4E6172; --d-sat:#8F4D2B; --d-paz:#815C0F; --d-ik:#8C4351; --d-fin:#3D4B8D; --d-huk:#5E4390; --d-yaz:#176E7A; --d-yon:#444B57; /* --- tipografi olcegi --- */ /* H1 tavani 3.5rem'den 3rem'e cekildi: 56px'te bu iki cumlelik baslik 1440'ta BES satira yayiliyor ve eylem yuvasini katin altina itiyordu. 48px + daha genis olcu -> uc satir, yuva kat cizgisinin ustunde kaliyor. */ --fs-h1:clamp(2.125rem,1.35rem + 2.4vw,3rem); --fs-h2:clamp(1.75rem,1.2rem + 1.6vw,2.375rem); --fs-h3:1.375rem; --fs-h4:1.25rem; --fs-lede:clamp(1.0625rem,.95rem + .4vw,1.1875rem); --fs-body:1.0625rem; --fs-body-s:.9375rem; --fs-prompt:.8125rem; --fs-label:.8125rem; --fs-mono:.78125rem; --fs-micro:.6875rem; --font-display:'Fraunces',Georgia,'Iowan Old Style',Cambria,serif; --font-ui:'Inter',-apple-system,'Segoe UI',system-ui,Roboto,Arial,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Consolas,'SF Mono',Menlo,monospace; /* --- yerlesim --- */ --gut:clamp(20px,4vw,88px); --maxw:1180px; --band:clamp(56px,7vw,112px); --r:2px; color-scheme:light; background:var(--paper); color:var(--ink); font-family:var(--font-ui); font-size:16px; -webkit-font-smoothing:antialiased; font-optical-sizing:auto; } :root[data-theme="dark"] .wy9{ --paper:#1B1917; --paper-raised:#24211C; --paper-sunken:#131210; --ink:#ECE7DB; --ink-soft:#B3ACA0; --ink-faint:#918B7E; --hairline:rgba(236,231,219,.14); --hairline-strong:rgba(236,231,219,.28); --accent:#82B8A2; --accent-deep:#A3D2BE; --stamp:#D97B77; --terminal-bg:#101413; --terminal-ink:#DCE5DE; --d-ops:#A7BCCC; --d-sat:#D9A176; --d-paz:#D8AE55; --d-ik:#DB99A6; --d-fin:#97A6E0; --d-huk:#B2A0E2; --d-yaz:#6FC4D0; --d-yon:#9AA3B2; color-scheme:dark; } /* guvenlik agi: erken script bir sekilde kosmazsa sistem tercihine dus */ @media (prefers-color-scheme:dark){ :root:not([data-theme]) .wy9{ --paper:#1B1917; --paper-raised:#24211C; --paper-sunken:#131210; --ink:#ECE7DB; --ink-soft:#B3ACA0; --ink-faint:#918B7E; --hairline:rgba(236,231,219,.14); --hairline-strong:rgba(236,231,219,.28); --accent:#82B8A2; --accent-deep:#A3D2BE; --stamp:#D97B77; --terminal-bg:#101413; --terminal-ink:#DCE5DE; --d-ops:#A7BCCC; --d-sat:#D9A176; --d-paz:#D8AE55; --d-ik:#DB99A6; --d-fin:#97A6E0; --d-huk:#B2A0E2; --d-yaz:#6FC4D0; --d-yon:#9AA3B2; color-scheme:dark; } } /* ---------- taban ---------- */ .wy9 *,.wy9 *::before,.wy9 *::after{box-sizing:border-box} .wy9 h1,.wy9 h2,.wy9 h3,.wy9 h4{font-family:var(--font-display);margin:0;color:var(--ink);text-wrap:balance} .wy9 h1{font-size:var(--fs-h1);font-weight:640;line-height:1.06;letter-spacing:-.02em;font-variation-settings:'opsz' 72} .wy9 h2{font-size:var(--fs-h2);font-weight:620;line-height:1.14;letter-spacing:-.012em;font-variation-settings:'opsz' 36} .wy9 h3{font-size:var(--fs-h3);font-weight:600;line-height:1.22;letter-spacing:-.008em;font-variation-settings:'opsz' 28} .wy9 h4{font-size:var(--fs-h4);font-weight:600;line-height:1.30;letter-spacing:-.006em;font-variation-settings:'opsz' 24} .wy9 p{margin:0;font-size:var(--fs-body);line-height:1.62;max-width:62ch} .wy9 a{color:var(--accent)} .wy9 :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)} .wy9 ::selection{background:var(--accent);color:var(--paper)} .wy9-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wy9-band{padding-block:var(--band)} .wy9-skip{position:absolute;left:-999px} .wy9-skip:focus{left:var(--gut);top:8px;z-index:80;background:var(--accent);color:var(--paper);padding:.6rem 1rem} /* mono damga — tek yerden yonetilen mikro tipografi */ .wy9-mono{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.55;letter-spacing:.04em;color:var(--ink-soft)} .wy9-micro{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;line-height:1.45;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft)} /* ---------- kesik kose imzasi (2 katman: kenarlik + govde) ---------- */ .wy9-cut{background:var(--hairline-strong);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)} .wy9-cut>*{background:var(--paper-raised);margin:1px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)} /* ---------- S0 ust serit ---------- */ .wy9-top{border-bottom:1px solid var(--hairline);background:var(--paper)} .wy9-top__in{display:flex;align-items:center;justify-content:space-between;height:56px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wy9-mark{display:flex;align-items:center;gap:12px;text-decoration:none} .wy9-mark b{font-family:var(--font-display);font-weight:640;font-size:1.25rem;color:var(--ink)} .wy9-mark i{width:1px;height:14px;background:var(--hairline-strong);display:block} .wy9-mark span{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft);font-style:normal} .wy9-nav{display:flex;align-items:center;gap:20px} .wy9-nav a{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);text-decoration:none} .wy9-nav a:hover{color:var(--ink)} .wy9-theme{width:26px;height:26px;display:grid;place-items:center;background:none;border:1px solid var(--hairline);border-radius:var(--r);color:var(--ink-soft);cursor:pointer;padding:0} .wy9-theme:hover{color:var(--ink);border-color:var(--accent)} .wy9-theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5} @media (max-width:640px){.wy9-top__in{height:52px}.wy9-nav a{display:none}} /* ---------- S1 hero ---------- */ .wy9-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:start} @media (max-width:1120px){.wy9-hero__grid{grid-template-columns:1fr;gap:40px}} .wy9-hero__l>*+*{margin-top:20px} .wy9-hero__l h1{max-width:26ch} /* sag kolondaki mono etiketler birbirine yapisiyordu */ .wy9-foy .wy9-micro+.wy9-micro{margin-top:10px} .wy9-gate p+p{margin-top:12px} .wy9-lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-soft);max-width:56ch} .wy9-hero__sec{display:inline-block;font-size:var(--fs-body-s);color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;text-underline-offset:3px;padding-bottom:1px} /* mobilde form foyden ONCE gelir */ @media (max-width:1120px){ .wy9-hero__grid{display:flex;flex-direction:column} .wy9-hero__l{order:1}.wy9-hero__r{order:2} } /* ---------- foy karti (hero sag kolon) ---------- */ .wy9-foy>*+*{margin-top:14px} .wy9-foy__tag{color:var(--dept,var(--accent))} .wy9-proof{display:inline-block;padding:5px 8px;border:1px solid currentColor;border-radius:var(--r);font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:600;line-height:1.35;letter-spacing:.07em;text-transform:uppercase} .wy9-proof--verified{color:var(--accent-deep)} .wy9-proof--structural{color:var(--d-paz)} .wy9-proof--draft{color:var(--ink-soft)} .wy9-idx__meta .wy9-proof{display:block;margin-top:6px;white-space:normal;text-align:right} @media (max-width:720px){.wy9-idx__meta .wy9-proof{text-align:left}} .wy9-foy__hook{font-size:var(--fs-body-s);color:var(--ink-soft);max-width:none} /* ---------- tarayici-ici is akisi karnesi ---------- */ .wy9-karne__head{max-width:760px} .wy9-karne__head>*+*{margin-top:14px} .wy9-karne__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 20px} .wy9-karne__grid label{display:grid;gap:8px;font-weight:650} .wy9-karne__grid label:last-child{grid-column:1/-1} .wy9-karne select{width:100%;padding:12px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--paper-raised);color:var(--ink);font:inherit} .wy9-karne__run{margin-top:4px} .wy9-karne__result{min-height:96px;margin-top:22px;padding:18px;border:1px solid var(--rule-strong);border-left:5px solid var(--accent);background:var(--paper-raised)} .wy9-karne__result>*+*{margin-top:12px} .wy9-karne__result-list{display:grid;gap:9px;padding-left:22px} .wy9-karne__warning{font-weight:650;color:var(--stamp)} @media (max-width:720px){.wy9-karne__grid{grid-template-columns:1fr}.wy9-karne__grid label:last-child{grid-column:auto}} /* cikti belgesi — ONCE cikti, sonra prompt */ .wy9-doc{overflow-x:auto} .wy9-doc table{border-collapse:collapse;width:100%;font-size:.8125rem;font-family:var(--font-ui)} .wy9-doc th,.wy9-doc td{border:1.5px solid var(--hairline);padding:7px 9px;text-align:left;vertical-align:top;line-height:1.4} .wy9-doc th{font-weight:600;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap} .wy9-doc td em{font-style:normal;color:var(--dept,var(--accent));font-weight:600} .wy9-doc__in{padding:16px} /* tablo olmayan ciktilar (rapor/liste/eposta) icin belge govdesi */ .wy9-doc__txt{font-size:var(--fs-body-s);line-height:1.6;color:var(--ink);max-width:none} .wy9-doc__txt em{font-style:normal;color:var(--dept,var(--accent));font-weight:600} /* terminal / prompt */ .wy9-term{position:relative} .wy9-term>div{background:var(--terminal-bg)!important;padding:16px} .wy9-term pre{margin:0;font-family:var(--font-mono);font-size:var(--fs-prompt);line-height:1.62;color:var(--terminal-ink);white-space:pre-wrap;word-break:break-word;-webkit-user-select:all;user-select:all;max-height:15.5em;overflow:hidden} .wy9-term__fade{position:absolute;left:1px;right:1px;bottom:1px;height:48px;background:linear-gradient(transparent,var(--terminal-bg));pointer-events:none} .wy9-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .wy9-copy{min-height:44px;padding:0 16px;background:none;border:1.5px solid var(--dept,var(--accent));color:var(--dept,var(--accent));border-radius:var(--r);font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background 180ms cubic-bezier(.3,.7,.25,1)} .wy9-copy:hover{background:color-mix(in srgb,var(--dept,var(--accent)) 8%,transparent)} .wy9-open{font-size:var(--fs-body-s);color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;text-underline-offset:3px} /* sinir satiri — sayfanin guven imzasi */ .wy9-sinir{border-left:2px solid var(--stamp);padding-left:12px;font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.55;color:var(--ink-soft)} .wy9-sinir b{color:var(--stamp);font-weight:500;letter-spacing:.06em} /* ---------- S2 sekiz masa + S3 uc foy: dizin satiri ---------- */ .wy9-idx{border-top:1px solid var(--hairline)} .wy9-idx a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:64px;padding:12px 8px;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;transition:background 120ms cubic-bezier(.3,.7,.25,1)} .wy9-idx a:hover{background:color-mix(in srgb,var(--dept,var(--accent)) 6%,var(--paper))} .wy9-idx__kod{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;color:var(--dept,var(--accent))} .wy9-idx__ad{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);line-height:1.3;color:var(--ink)} .wy9-idx__vaat{font-size:var(--fs-body-s);color:var(--ink-soft);margin-top:2px} .wy9-idx__meta{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:right;white-space:nowrap} @media (max-width:720px){ .wy9-idx a{grid-template-columns:52px minmax(0,1fr);row-gap:4px} .wy9-idx__meta{grid-column:2;text-align:left} } /* ---------- S4 yontem + S5 acik sorular: adim listesi ---------- */ .wy9-steps{display:grid;gap:24px;margin-top:24px} @media (min-width:860px){.wy9-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}} .wy9-step__n{color:var(--ink-soft)} .wy9-step h3{margin:6px 0 8px} .wy9-step p{font-size:var(--fs-body-s);color:var(--ink-soft)} /* negatif taahhut listesi */ .wy9-vow{margin-top:20px;border-top:1px solid var(--hairline)} .wy9-vow li{list-style:none;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:var(--fs-body);line-height:1.55;color:var(--ink);max-width:70ch} .wy9-vow{padding-left:0} /* acik sorular durum satiri */ .wy9-open__st{border-left:2px solid var(--stamp);padding-left:12px;margin-top:8px} /* ---------- S6 ben ---------- */ .wy9-ben{background:var(--paper-raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .wy9-ben__grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:48px;align-items:start} @media (max-width:900px){.wy9-ben__grid{grid-template-columns:1fr;gap:28px}} .wy9-ben__ad{font-family:var(--font-display);font-weight:640;font-size:1.75rem;color:var(--ink);margin:10px 0 4px} .wy9-ben__body>p{margin-top:16px;max-width:62ch} .wy9-card{width:232px} .wy9-card>div{padding:16px} .wy9-card dl{margin:0;font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.55;color:var(--ink-soft)} .wy9-card dt{font-weight:500;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-micro)} .wy9-card dd{margin:0 0 8px} .wy9-follow{display:inline-block;margin-top:20px;font-size:var(--fs-body-s);color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;text-underline-offset:3px} /* ---------- eylem yuvasi (hero + S7 ayni bilesen) ---------- */ .wy9-slot{max-width:520px} .wy9 .wy9-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--accent);color:var(--paper);border:0;border-radius:var(--r);font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background 180ms cubic-bezier(.3,.7,.25,1)} .wy9-btn:hover{background:var(--accent-deep)} :root[data-theme="dark"] .wy9 .wy9-btn{background:var(--accent-deep);color:var(--paper)} .wy9-btn[aria-disabled="true"]{opacity:.55} .wy9-alt{display:inline-block;margin-top:12px;font-size:var(--fs-body-s);color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;text-underline-offset:3px} /* kapali kapi kutusu — hata degil, karakter kaniti */ .wy9-gate{background:var(--paper-sunken);border-left:2px solid var(--stamp);padding:20px} .wy9-gate p{margin-top:12px;font-size:var(--fs-body);color:var(--ink-soft)} .wy9-gate__lbl{color:var(--stamp)} /* form */ .wy9-form label>span{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px} .wy9-form input[type=email]{width:100%;height:48px;padding:0 2px;background:none;border:0;border-bottom:1.5px solid var(--ink);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body);border-radius:0} .wy9-form input[type=email]::placeholder{color:var(--ink-faint)} .wy9-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .wy9-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--hairline-strong);border-radius:var(--r);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;background:none} .wy9-chip input{position:absolute;opacity:0;width:0;height:0} .wy9-chip:has(input:checked){background:var(--dept,var(--accent));border-color:var(--dept,var(--accent));color:var(--paper)} .wy9-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .wy9-legal{margin-top:20px;padding-top:20px;border-top:1px solid var(--hairline-strong)} .wy9-legal>*+*{margin-top:16px} .wy9-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start} .wy9-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);border-radius:3px} .wy9-check b{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px} .wy9-check span{font-size:var(--fs-body-s);line-height:1.55;color:var(--ink)} .wy9-form details{margin-top:6px} .wy9-form summary{font-size:var(--fs-body-s);color:var(--accent);cursor:pointer} .wy9-form details p{font-size:var(--fs-body-s);color:var(--ink-soft);margin-top:8px} .wy9-err{font-size:var(--fs-body-s);color:var(--stamp);margin-top:8px} .wy9-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- S7 bulten bandi ---------- */ .wy9-bulten{background:var(--paper-sunken)} .wy9-bulten__in{max-width:560px;margin-inline:auto} .wy9-bulten__in>*+*{margin-top:20px} /* --ink-faint x --paper-sunken = 4.41 -> YASAK. sunken bantta ink-soft. */ .wy9-bulten .wy9-mono,.wy9-bulten .wy9-micro,.wy9-kunye .wy9-mono,.wy9-kunye .wy9-micro{color:var(--ink-soft)} /* ---------- S8 kunye ---------- */ .wy9-kunye{background:var(--paper-sunken);border-top:1px solid var(--hairline)} .wy9-kunye__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} @media (max-width:820px){.wy9-kunye__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}} @media (max-width:480px){.wy9-kunye__grid{grid-template-columns:1fr}} .wy9-kunye a{color:var(--ink-soft);text-decoration:none;display:block;padding:3px 0} .wy9-kunye a:hover{color:var(--ink)} .wy9-kunye__b{margin-top:32px;padding-top:20px;border-top:1px solid var(--hairline)} /* ---------- hareket butcesi: 3 gecis, 0 ambient ---------- */ @media (prefers-reduced-motion:reduce){ .wy9 *,.wy9 *::before,.wy9 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} }