/* bestwebdesign — tasarım sistemi (batuhan-designer). Harici, sayfalar arası cache'lenir. */
:root{
--paper:#fbfaf7;--paper-2:#f3efe7;--ink:#17171a;--ink-soft:#55524c;--hairline:#e4ded2;
--accent:#b4552f;--accent-soft:#f4e7df;
--font-serif:'Fraunces',Georgia,serif;--font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--measure:68ch;--wrap:74rem;
--step--1:clamp(0.83rem,0.8rem + 0.15vw,0.9rem);--step-0:clamp(1rem,0.96rem + 0.2vw,1.12rem);
--step-1:clamp(1.2rem,1.1rem + 0.5vw,1.4rem);--step-2:clamp(1.5rem,1.3rem + 1vw,1.9rem);
--step-3:clamp(1.9rem,1.5rem + 2vw,2.7rem);--step-4:clamp(2.4rem,1.8rem + 3vw,3.6rem);
--radius:4px;--radius-lg:10px;--space:clamp(1rem,0.8rem + 1vw,1.5rem);--section:clamp(3rem,2rem + 5vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.15em;text-decoration-color:var(--accent)}a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:560;line-height:1.12;letter-spacing:-.01em}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3);margin-top:2.4em;margin-bottom:.5em}
h3{font-size:var(--step-2);margin-top:1.8em;margin-bottom:.4em}h4{font-size:var(--step-1)}
p+p{margin-top:1em}
.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.prose{width:min(100% - 2.4rem,var(--measure));margin-inline:auto}
.prose>*+*{margin-top:1.1em}.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.35em}
.eyebrow{font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-sans);font-weight:600;font-size:var(--step-0);padding:.85em 1.5em;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:transform .12s,background .2s}
.btn:hover{background:#000;color:var(--paper);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink)}.btn--ghost:hover{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* header */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--hairline)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1.5rem}
.brand{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand__mark{font-family:var(--font-serif);font-weight:600;font-size:1.15rem;background:var(--ink);color:var(--paper);padding:.15em .4em;border-radius:3px;letter-spacing:-.02em}
.brand__name{font-family:var(--font-serif);font-size:1.15rem;letter-spacing:-.01em}
.site-header nav ul{list-style:none;display:flex;align-items:center;gap:1.4rem;padding:0;margin:0}
.site-header nav a{font-size:var(--step--1);font-weight:500;text-decoration:none}
.site-header nav a[aria-current=page]{color:var(--accent)}
.site-header .btn{font-size:var(--step--1);padding:.55em 1em}
@media(max-width:720px){.brand__name{display:none}.site-header nav ul{gap:.9rem}.site-header nav li:not(:last-child):not(:first-child){display:none}}
/* guide head */
.guide{padding-top:clamp(1.5rem,1rem + 3vw,3rem)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;font-size:var(--step--1);color:var(--ink-soft)}
.crumbs a{text-decoration:none;color:var(--ink-soft)}.crumbs a:hover{color:var(--accent)}.crumbs .sep{margin-left:.4rem;opacity:.5}
.guide__eyebrow{margin:.8rem 0}
.guide__answer{font-family:var(--font-serif);font-size:var(--step-2);line-height:1.32;color:var(--ink);margin-top:.8rem;max-width:32ch}
.guide__meta{font-size:var(--step--1);color:var(--ink-soft);margin-top:1rem}
.guide__body{margin-top:2rem}.guide__body h2,.guide__body h3{scroll-margin-top:5rem}
/* tldr */
.tldr{background:var(--paper-2);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:var(--radius);padding:1.3rem 1.5rem;margin:1.6rem 0}
.tldr__label{font-family:var(--font-sans);font-weight:700;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.7rem}
.tldr ul{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
/* table */
.table-wrap{margin:1.6rem 0;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:var(--step-0);font-variant-numeric:tabular-nums}
.table-wrap caption{text-align:left;font-family:var(--font-serif);font-size:var(--step-1);margin-bottom:.6rem;caption-side:top}
.table-wrap th,.table-wrap td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--hairline);vertical-align:top}
.table-wrap thead th{font-family:var(--font-sans);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);border-bottom:2px solid var(--ink)}
.table-wrap tbody th[scope=row]{font-weight:600}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-soft)}
/* editor note */
.editor-note{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-left:3px solid var(--accent);border-radius:var(--radius);padding:1.3rem 1.5rem;margin:1.8rem 0}
.editor-note.is-draft{background:repeating-linear-gradient(135deg,var(--accent-soft),var(--accent-soft) 12px,#f7ede6 12px,#f7ede6 24px)}
.editor-note__head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem}
.editor-note__label{font-family:var(--font-sans);font-weight:700;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.editor-note__badge{font-size:.72rem;font-weight:700;background:var(--ink);color:var(--paper);padding:.15em .55em;border-radius:999px}
.editor-note__who{margin-left:auto;font-family:var(--font-serif);font-style:italic;color:var(--ink-soft)}
.editor-note__body :is(p)+p{margin-top:.7em}
/* ad label */
.ad-label{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:#fff6e9;border:1px solid #e8c98f;border-radius:var(--radius);padding:.6rem .9rem;margin:1.2rem 0;font-size:var(--step--1)}
.ad-label__tag{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;background:#9a6a12;color:#fff;padding:.2em .6em;border-radius:3px}
.ad-label__text{color:#5a4a2a}
/* sources + faq */
.sources{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.sources h2{font-size:var(--step-1);margin-top:0}.sources ol{padding-left:1.3rem;display:grid;gap:.5rem;margin-top:.8rem}
.sources li{font-size:var(--step--1)}.sources .date{color:var(--ink-soft)}
.faq{margin-top:2.5rem}.faq h2{font-size:var(--step-2)}.faq__list{margin-top:1rem;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-family:var(--font-serif);font-size:var(--step-1);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';color:var(--accent);font-size:1.4em;line-height:1}
.faq details[open] summary::after{content:'–'}.faq__a{padding:0 0 1.1rem;color:var(--ink-soft);max-width:var(--measure)}
/* cta */
.cta{margin-top:var(--section);background:var(--ink);color:var(--paper)}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:var(--section) 0}
.cta h2{color:var(--paper);margin:0 0 .5rem;max-width:22ch}.cta p{color:color-mix(in srgb,var(--paper) 78%,var(--ink));max-width:46ch}
.btn--invert{background:var(--paper);color:var(--ink);border-color:var(--paper);flex-shrink:0}
.btn--invert:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
@media(max-width:720px){.cta__inner{flex-direction:column;align-items:flex-start;gap:1.5rem}}
/* author */
.author{display:flex;gap:1rem;align-items:flex-start;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.author__avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--font-serif);font-size:1.3rem}
.author__name{font-weight:600}.author__role{color:var(--ink-soft);font-weight:400}
.author__bio{font-size:var(--step--1);color:var(--ink-soft);margin-top:.2rem;max-width:52ch}
.author__dates{font-size:var(--step--1);color:var(--ink-soft);margin-top:.4rem}.author .sep{margin:0 .4rem}
/* footer */
.site-footer{margin-top:var(--section);border-top:1px solid var(--hairline);background:var(--paper-2);padding:var(--section) 0 2rem}
.site-footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.site-footer .tag{color:var(--ink-soft);font-size:var(--step--1);margin-top:.5rem;max-width:34ch}
.site-footer h4{font-family:var(--font-sans);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:.8rem;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.site-footer a{font-size:var(--step--1);text-decoration:none}
.site-footer .fine{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline);font-size:var(--step--1);color:var(--ink-soft);display:grid;gap:.3rem}
@media(max-width:640px){.site-footer .grid{grid-template-columns:1fr;gap:1.8rem}}
/* cookie banner */
.cookie{position:fixed;inset:auto 1rem 1rem 1rem;z-index:60;max-width:40rem;margin-inline:auto;background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.18);padding:1.3rem 1.4rem}
.cookie__title{font-family:var(--font-serif);font-size:var(--step-1);margin-bottom:.3rem}
.cookie__text{font-size:var(--step--1);color:var(--ink-soft)}
.cookie__cats{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin:1rem 0}
.cookie__cat{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--step--1);cursor:pointer}
.cookie__cat--locked{color:var(--ink-soft);cursor:default}.cookie__cat small{color:var(--ink-soft)}
.cookie__actions{display:flex;flex-wrap:wrap;gap:.6rem}.cookie__actions .btn{font-size:var(--step--1);padding:.6em 1.1em}
@media(max-width:520px){.cookie__actions .btn{flex:1 1 auto;justify-content:center}}
/* home */
.hero{padding:clamp(3rem,2rem + 6vw,7rem) 0 clamp(2rem,1rem + 4vw,4rem);border-bottom:1px solid var(--hairline)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
.hero h1{font-size:var(--step-4);margin:.6rem 0 0;letter-spacing:-.02em}
.hero__lead{font-size:var(--step-1);color:var(--ink-soft);max-width:56ch;margin-top:1.3rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__media{display:flex;justify-content:center}
.hero-art{width:100%;max-width:520px;height:auto;filter:drop-shadow(0 24px 48px rgba(23,23,26,.10))}
@media(max-width:820px){.hero__grid{grid-template-columns:1fr}.hero__media{order:-1;max-width:420px;margin-inline:auto}}
.guides{margin-top:var(--section)}.guides__head h2{margin:0}.guides__head p{color:var(--ink-soft);margin-top:.4rem}
.guides__grid{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.card a{display:flex;flex-direction:column;height:100%;gap:.5rem;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:1.6rem;transition:border-color .2s,transform .12s}
.card a:hover{border-color:var(--ink);transform:translateY(-2px)}
.card h3{margin:.2rem 0;font-size:var(--step-1)}.card p{color:var(--ink-soft);font-size:var(--step--1);flex:1}
.card__cta{font-size:var(--step--1);font-weight:600;color:var(--accent);margin-top:.5rem}
.card--soon a{opacity:.62}.card--soon a:hover{transform:none;border-color:var(--hairline)}.card--soon .card__cta{color:var(--ink-soft)}
.promise{margin-top:var(--section)}.promise__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.5rem}
.promise__grid h3{font-size:var(--step-1)}.promise__grid p{color:var(--ink-soft);font-size:var(--step--1);margin-top:.4rem}
@media(max-width:720px){.guides__grid{grid-template-columns:1fr}.promise__grid{grid-template-columns:1fr;gap:1.4rem}}
/* lead form */
.lead{padding:clamp(2rem,1rem + 4vw,4rem) 0}
.lead__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}
.lead__lead{color:var(--ink-soft);font-size:var(--step-1);margin-top:1rem}
.lead__points{margin-top:1.5rem;padding-left:1.1rem;color:var(--ink-soft);display:grid;gap:.5rem}
.form{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:clamp(1.4rem,1rem + 2vw,2.2rem)}
.field{display:grid;gap:.35rem;margin-bottom:1rem}.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-size:var(--step--1);font-weight:600}
input,select,textarea{font:inherit;font-size:var(--step-0);padding:.7em .8em;border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}textarea{resize:vertical}
.consent{margin:1.2rem 0;padding:1rem;background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--hairline)}
.consent__info{font-size:var(--step--1);color:var(--ink-soft);margin-bottom:.8rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start;font-weight:400;font-size:var(--step--1);margin-bottom:.6rem;cursor:pointer}
.check input{width:auto;margin-top:.15rem}
.form__note{margin-top:.9rem;font-size:var(--step--1);color:var(--accent)}
@media(max-width:820px){.lead__grid{grid-template-columns:1fr}.row{grid-template-columns:1fr}}
/* legal + hub + about */
.legal{padding-top:3rem}.legal h2{font-size:var(--step-1)}
.legal table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:var(--step--1)}
.legal th,.legal td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--hairline)}
.legal thead th{border-bottom:2px solid var(--ink);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;color:var(--ink-soft)}
.notice{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-left:3px solid var(--accent);border-radius:var(--radius);padding:1rem 1.2rem;font-size:var(--step--1);margin:1.2rem 0}
.notice code{background:#fff;padding:.1em .35em;border-radius:3px}
.upd{color:var(--ink-soft);font-size:var(--step--1);margin-top:2rem}
.legal .form{background:transparent;border:none;padding:0;margin-top:1.5rem}
.about{padding-top:3rem}.about h2{font-size:var(--step-1)}.about .lead{font-size:var(--step-1);color:var(--ink-soft);padding:0}
.hub{padding:3rem 0}.hub .lead{font-size:var(--step-1);color:var(--ink-soft);max-width:56ch}
.cluster{margin-top:2.5rem}.cluster h2{font-size:var(--step-1);padding-bottom:.5rem;border-bottom:1px solid var(--hairline)}
.cluster ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 2rem}
.cluster li{padding:.3rem 0}.cluster a{text-decoration:none;font-weight:500}
.cluster .soon span{color:var(--ink-soft)}.cluster .soon em{color:color-mix(in srgb,var(--ink-soft) 70%,var(--paper));font-style:normal}
@media(max-width:640px){.cluster ul{grid-template-columns:1fr}}