@font-face{font-family:"Bricolage"; src:url("fonts/bricolage-800.woff2") format("woff2"); font-weight:800; font-display:swap}
@font-face{font-family:"Bricolage"; src:url("fonts/bricolage-600.woff2") format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"Silkscreen"; src:url("fonts/silkscreen.woff2") format("woff2"); font-weight:700; font-display:swap}

:root{--ink:#1f1d1a; --krem:#f5f2e8; --sari:#f1d21c; --turuncu:#f2a33a; --pembe:#e8679b; --mavi:#2f64c6; --camgobegi:#14a2b3; --kirmizi:#e4553d;
  --mantar:#c79a62; --mantar2:#b5884f; --gov:"Bricolage",system-ui,sans-serif; --pix:"Silkscreen",ui-monospace,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--krem); color:var(--ink); font:600 1rem/1.5 var(--gov)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
a:focus-visible{outline:3px solid var(--mavi); outline-offset:3px}

.serit{display:flex; height:14px; border-bottom:3px solid var(--ink)}
.serit i{flex:1}
.serit i:nth-child(1){background:var(--pembe)} .serit i:nth-child(2){background:var(--mavi)}
.serit i:nth-child(3){background:var(--camgobegi)} .serit i:nth-child(4){background:var(--kirmizi)}


.ust{display:grid; border-bottom:3px solid var(--ink)}
.figur{display:flex; justify-content:center; align-items:flex-end; background:#fdd412; border-bottom:3px solid var(--ink)}
.figur img{width:100%; max-width:300px}
.kimlik{padding:20px 16px 24px; max-width:34rem}
.marka{font:700 .85rem/1 var(--pix); letter-spacing:.06em; background:var(--ink); color:var(--sari); padding:6px 10px; display:inline-block}
h1{font:800 clamp(2.6rem,11vw,4.6rem)/.95 var(--gov); letter-spacing:-.02em; margin:12px 0 6px}
.unvan{font-size:1.15rem; margin:0}
.soz{font-weight:800; font-size:1.2rem; line-height:1.3; margin:18px 0 0}
.hesap{display:inline-block; margin-top:16px; font-weight:800; font-size:1.05rem; text-decoration:none; background:var(--sari); border:3px solid var(--ink); padding:8px 14px; box-shadow:4px 4px 0 var(--ink)}


.etiket{display:inline-block; font:800 .95rem/1 var(--gov); letter-spacing:.08em; background:var(--ink); color:var(--krem); padding:8px 12px; margin:0 0 16px}

.pano{padding:28px 16px 32px; border-bottom:3px solid var(--ink);
  background-color:var(--mantar); background-image:radial-gradient(var(--mantar2) 1px, transparent 1.6px), radial-gradient(#d6ab74 1px, transparent 1.6px); background-size:7px 7px, 11px 11px; background-position:0 0, 3px 5px}
.pano .etiket{background:var(--krem); color:var(--ink); border:3px solid var(--ink)}
.kartlar{display:grid; gap:22px}
.pin{position:relative; display:block; text-decoration:none; background:#fff; border:3px solid var(--ink); padding:12px 12px 16px; box-shadow:5px 6px 0 rgba(31,29,26,.55); max-width:26rem}
.pin::before{content:""; position:absolute; top:-11px; left:50%; width:20px; height:20px; margin-left:-10px; border-radius:50%; background:var(--kirmizi); border:3px solid var(--ink); box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.pin.yt{transform:rotate(-1.6deg)} .pin.ig{transform:rotate(1.4deg); justify-self:end}
.pin img{border:2px solid var(--ink)}
.pin.ig img{width:150px}
.pin b{display:block; font-size:1.35rem; margin-top:10px}
.pin span{display:block}
.pin em{display:inline-block; font-style:normal; font-weight:800; margin-top:8px; background:var(--sari); padding:2px 8px; border:2px solid var(--ink)}

.harita{padding:28px 16px 32px}
.yol{width:100%; max-width:560px; height:auto; display:block; margin:0 auto 18px; background:#fff; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink)}
.yol circle{stroke:var(--ink); stroke-width:3}
.yol text{font:800 15px var(--gov); text-anchor:middle; fill:var(--ink)}
.yol text.ad{font-size:14px; text-anchor:start; paint-order:stroke; stroke:#fff; stroke-width:6px; stroke-linejoin:round}
.yol text.ad.sag{text-anchor:end}
.yol text.ad.orta{text-anchor:middle}
.yol a:hover circle, .yol a:focus circle{stroke-width:5}
.isler{list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; max-width:44rem}
.isler li{display:flex; gap:12px; align-items:flex-start; background:#fff; border:3px solid var(--ink); padding:12px 14px; box-shadow:4px 4px 0 var(--ink); scroll-margin-top:16px}
.isler li > div{min-width:0}
.isler li > img, .nokta-ikon{width:56px; height:56px; flex:none; border:2px solid var(--ink)}
.nokta-ikon{border-radius:50%}
.piksel{image-rendering:pixelated}
.isler h3{font:800 1.3rem/1.1 var(--gov); margin:2px 0 6px}
.isler p{margin:0 0 8px}
.isler p:last-child{margin:0}
.isler code{display:block; font:600 .85rem/1.4 ui-monospace,Menlo,monospace; background:var(--ink); color:var(--krem); padding:8px 10px; overflow-x:auto; white-space:nowrap}
.git{display:inline-block; font-weight:800; min-height:44px; line-height:44px}
.yakinda{display:inline-block; font-weight:800; font-size:.9rem; background:var(--krem); border:2px dashed var(--ink); padding:3px 9px}

.mentor{padding:40px 16px 44px; max-width:44rem; margin:0 auto}
.mentor p{margin:0; font-size:1.1rem}

footer{background:var(--ink); color:var(--krem); padding:22px 16px; font-size:.9rem}
footer p{margin:4px 0}

@media (min-width:760px){
  .ust{grid-template-columns:minmax(260px,38%) 1fr}
  .figur{border-bottom:0; border-right:3px solid var(--ink)}
  .figur img{max-width:420px}
  .kimlik{padding:40px; align-self:center}
  .pano,.harita{padding-left:40px; padding-right:40px}
  .kartlar{grid-template-columns:1.4fr 1fr; align-items:start; max-width:860px; margin:0 auto}
  .pin.ig{justify-self:start; margin-top:30px}
  .pano .etiket,.harita .etiket{display:table; margin-left:auto; margin-right:auto}
}
@media (min-width:1040px){
    .harita{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:start; max-width:1180px; margin:0 auto}
  .harita .etiket{grid-column:1/-1}
  .yol{margin:0; position:sticky; top:16px}
}
@media (prefers-reduced-motion:no-preference){ .pin{transition:transform .15s} .pin:hover{transform:rotate(0) translateY(-3px)} }