/* os.mehmetozkan.net: renkler mhmt-tokens.json'dan (build.py). */
:root { --zemin:#F8F8F9; --yuzey:#EDEDF0; --kenar:#D6D6DB; --metin:#1A1A1C;
  --soluk:#606067; --vurgu:#A51D36; --koyu:#1A1A1C; --koyu-yuzey:#2A2A2E; --acik-metin:#ECECEC;
  --acik-soluk:#A3A3A8; }
@media (prefers-color-scheme: dark) { :root { --zemin:#1A1A1C; --yuzey:#2A2A2E; --kenar:#36363B;
  --metin:#ECECEC; --soluk:#A3A3A8;
  --baglanti:#CC8F9A; } }
* { box-sizing:border-box }
html { background:var(--zemin); color:var(--metin) }
body { margin:0; font-family:"Noto Sans", system-ui, sans-serif; line-height:1.6; font-size:17px }
a { color:var(--baglanti, var(--vurgu)) }
.ic { max-width:72rem; margin:0 auto; padding:0 1.25rem }
.ust { background:var(--koyu); position:sticky; top:0; z-index:5; border-bottom:3px solid var(--vurgu) }
.ust .ic { display:flex; align-items:center; gap:1.5rem; min-height:3.6rem; flex-wrap:wrap }
.marka img { height:1.9rem; display:block }
nav { display:flex; gap:.2rem; flex-wrap:wrap; margin-left:auto }
nav a { color:var(--acik-metin); text-decoration:none; padding:.45rem .8rem; border-radius:4px; font-size:.95rem }
nav a:hover, nav a[aria-current] { background:var(--koyu-yuzey) }
.hero { background:var(--koyu) url(/img/hero.jpg) center/cover; color:var(--acik-metin); padding:7rem 0 6rem }
.hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.1; margin:0 0 1rem; font-weight:300 }
.hero p { font-size:1.25rem; max-width:38rem; color:var(--acik-soluk); margin:0 0 2rem }
.dugme { display:inline-block; background:var(--vurgu); color:#ECECEC; padding:.75rem 1.5rem; border-radius:4px;
  text-decoration:none; font-weight:600; margin:0 .6rem .6rem 0 }
.dugme.ikincil { background:transparent; border:1px solid var(--acik-soluk); color:var(--acik-metin) }
section { padding:4rem 0 } section.ara { background:var(--yuzey) }
h2 { font-weight:300; font-size:2rem; margin:0 0 1.5rem }
.izgara { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)) }
.kart { background:var(--zemin); border:1px solid var(--kenar); border-top:3px solid var(--vurgu); padding:1.4rem; border-radius:4px }
section.ara .kart { background:var(--zemin) }
.kart h3 { margin:.2rem 0 .5rem; font-weight:600 } .kart p { margin:0; color:var(--soluk) }
pre, code { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:.9em }
pre { background:var(--koyu); color:var(--acik-metin); padding:1rem 1.2rem; border-radius:4px; overflow-x:auto; border-left:3px solid var(--vurgu) }
:not(pre) > code { background:var(--yuzey); padding:.1em .35em; border-radius:3px }
table { border-collapse:collapse; width:100% } th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--kenar); vertical-align:top }
th { color:var(--soluk) }
.belge { max-width:52rem; padding:3rem 1.25rem } .belge h2 { margin-top:2.5rem; font-size:1.6rem }
.ekran { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)) }
.ekran img { width:100%; border-radius:4px; border:1px solid var(--kenar); display:block }
.ekran figcaption { color:var(--soluk); font-size:.9rem; margin-top:.3rem }
.renkler { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }
.renkler span { width:2.2rem; height:2.2rem; border-radius:50% }
.bilgi { background:var(--yuzey); border-left:3px solid var(--vurgu); padding:1rem 1.2rem; border-radius:4px }
footer { background:var(--koyu); color:var(--acik-soluk); padding:2.5rem 0; font-size:.9rem; margin-top:3rem }
footer a { color:var(--acik-metin) } .alt-logo { height:1.6rem }