/* mkandemir.com.tr — light, quiet, personal */
:root{
  --paper:#f3efe6; --paper2:#ebe5d8; --card:#faf7f0;
  --ink:#16140f; --ink2:#4a463d; --ink3:#7a7466;
  --line:rgba(22,20,15,.12); --line2:rgba(22,20,15,.22);
  --accent:#c2410c; --accent-soft:rgba(194,65,12,.1);
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--paper)}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px}
.skip:focus{top:12px}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:-.03em;text-decoration:none;font-size:18px;min-height:44px;display:inline-flex;align-items:center}
.brand b{color:var(--accent)}
.top nav{display:flex;align-items:center;gap:4px}
.top nav a{text-decoration:none;color:var(--ink2);font-size:15px;padding:10px 12px;border-radius:999px;transition:background .2s,color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);background:var(--paper2)}

/* home */
.home{min-height:calc(100svh - 89px - 81px);display:flex;align-items:center;padding:64px 0}
.home .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:64px;align-items:end}
.hello{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:10px}
.hello i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
h1{margin:26px 0 28px;font-weight:500;font-size:clamp(56px,9.4vw,136px);line-height:.92;letter-spacing:-.055em}
h1 em{color:var(--accent);letter-spacing:-.02em}
.intro{max-width:560px;font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--ink2)}
.intro strong{color:var(--ink);font-weight:500}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.links li{border-bottom:1px solid var(--line2)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;text-decoration:none;font-size:19px;letter-spacing:-.01em;transition:padding .35s var(--ease),color .2s}
.links a span{font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink3)}
.links a:hover{padding-left:12px;color:var(--accent)}
.links a.feature{font-weight:500}
.links a.feature span{color:var(--accent)}
.clock{margin-top:22px;color:var(--ink3)}

/* footer */
footer{border-top:1px solid var(--line);padding:26px 0 32px;color:var(--ink3);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:var(--accent)}

/* glossary */
.g-head{padding:72px 0 36px}
.g-head h1{font-size:clamp(48px,8vw,112px);margin:18px 0 22px}
.g-head p{max-width:640px;color:var(--ink2);font-size:clamp(17px,1.5vw,20px)}
.g-tools{position:sticky;top:0;z-index:5;background:rgba(243,239,230,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--line);padding:14px 0}
.g-tools .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.search{flex:1 1 280px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:0 18px;min-height:50px}
.search svg{width:18px;height:18px;color:var(--ink3);flex:none}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);min-width:0;padding:12px 0}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--ink)}
.az{display:flex;flex-wrap:wrap;gap:2px}
.az a{font:500 13px var(--mono);text-decoration:none;min-width:30px;min-height:32px;display:grid;place-items:center;border-radius:6px;color:var(--ink2)}
.az a:hover{background:var(--paper2);color:var(--ink)}
.count{color:var(--ink3)}
.terms{padding:32px 0 80px}
.letter{font:400 44px/1 var(--serif);font-style:italic;color:var(--accent);margin:40px 0 14px;scroll-margin-top:96px}
.term{border-top:1px solid var(--line2);padding:24px 0;display:grid;grid-template-columns:.38fr .62fr;gap:28px;scroll-margin-top:96px}
.term h3{margin:0;font-size:24px;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.term h3 a{text-decoration:none}
.term h3 a:hover{color:var(--accent)}
.term .en{display:block;margin-top:6px;color:var(--ink3)}
.term .abbr{display:inline-block;margin-top:10px;font:500 12px var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.term p{margin:0;color:var(--ink2)}
.term .ex{margin-top:12px;padding:12px 14px;border-left:2px solid var(--accent);background:var(--card);border-radius:0 8px 8px 0;font-size:15.5px}
.term .ex b{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:4px}
.term .see{margin-top:10px;font-size:15px;color:var(--ink3)}
.term .see a{color:var(--ink2)}
.term:target{background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
.empty{display:none;padding:48px 0;color:var(--ink3);font-size:18px}
.note{margin-top:48px;padding:22px 24px;border:1px dashed var(--line2);border-radius:14px;color:var(--ink2);font-size:15.5px}

/* 404 */
.nf{min-height:calc(100svh - 170px);display:flex;align-items:center}
.nf h1{font-size:clamp(90px,18vw,220px)}

/* entrance */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .ready .rise{opacity:1;transform:none}
.js .ready .rise.d1{transition-delay:.08s}.js .ready .rise.d2{transition-delay:.16s}.js .ready .rise.d3{transition-delay:.24s}

@media (max-width:820px){
  .home{min-height:auto;padding:48px 0 56px}
  .home .wrap{grid-template-columns:1fr;gap:44px}
  .term{grid-template-columns:1fr;gap:12px}
  .az{display:none}
}
@media (max-width:480px){
  body{font-size:16px}
  .top nav a{padding:10px 9px;font-size:14px}
  .links a{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .rise{opacity:1;transform:none}
}
