@font-face{font-family:"Mali";src:url(../fonts/mali.woff2) format("woff2");font-weight:400;font-display:block}
/* Eskiz defteri: beyaz kâğıt, siyah mürekkep; başlıklar dağınık bir haritada, tıklanınca kamera oraya kayar ve yan sayfa açılır. Tek görünüm, bilinçli. */
:root{
  --paper:#fdfdfb; --dot:#e4e4e2; --ink:#1b1c1f; --ink-2:#55585e; --ink-3:#8d9096;
  --red:#ff3131; --pencil:#8f9297; --sheet:#ffffff; --line:rgba(27,28,31,.12);
  --hand:"Mali","Comic Sans MS",cursive; --ui:"Inter",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--hand);overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation}
#stage{position:fixed;inset:0;overflow:hidden;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .38 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");cursor:default;-webkit-user-select:none;user-select:none}
#world{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .8s cubic-bezier(.65,0,.2,1)}
#ink,#sketch{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#sk g.d{fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--pencil);opacity:.55;transition:opacity .5s,color .5s,stroke .5s}
#sk g.d > g{filter:url(#rough)}
#sk text{fill:currentColor;stroke:none;font-family:var(--hand)}
#sk .spot{opacity:.9}
#ghosts .smear{fill:#efefed;stroke:none;filter:url(#smear);opacity:.45}
#sk .tr{stroke-width:1.5}
#ghosts .ghost{fill:#c9cac8;opacity:.16;font-family:var(--hand);filter:url(#blur1)}
#ghosts .ghost-l{fill:none;stroke:#c9cac8;stroke-width:2;opacity:.25}
#sk .smudge{fill:#ececeb;stroke:none;filter:url(#smear);opacity:.9}
#sk g.d.v{opacity:.3}
#sk g.d.v.x{opacity:.22}
body.focused #sk g.d{opacity:.18}
body.focused #sk g.d.v{opacity:.1}
body.focused #sk g.d.v.on{opacity:.5}
body.focused #sk g.d.on{opacity:1;color:var(--ink-2);stroke:var(--ink-2)}
#ink path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,opacity .4s}
.node{text-shadow:0 0 8px var(--paper),0 0 3px var(--paper),0 0 1px var(--paper);position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:6px 10px;margin:0;
  font:400 46px/1.05 var(--hand);color:var(--ink);cursor:pointer;white-space:nowrap;transition:opacity .4s,color .3s}
.node:hover{color:var(--c)}
.node:focus-visible{outline:2px dashed var(--c);outline-offset:6px;border-radius:12px}
.node.me{font-size:110px;color:var(--ink)}
body.focused .node:not(.on):not(.me){opacity:.28}
body.focused .node.me{opacity:.5}

/* yan sayfa */
#sheet{position:fixed;top:16px;right:16px;bottom:16px;width:min(440px,calc(100vw - 32px));background:var(--sheet);
  border:2px solid var(--ink);border-radius:26px 30px 24px 32px / 30px 24px 32px 26px;padding:28px 30px 26px;
  transform:translateX(calc(100% + 40px)) rotate(1.5deg);transition:transform .7s cubic-bezier(.65,0,.2,1);
  display:flex;flex-direction:column;gap:18px;overflow:auto}
#sheet.open{transform:none}
#sheet .back{align-self:flex-start;font:600 14px/1 var(--ui);color:var(--ink-2);background:none;border:0;padding:6px 0;cursor:pointer}
#sheet .back:hover{color:var(--ink)}
#sheet h2{font:400 46px/1.05 var(--hand);margin:0;text-wrap:balance}
#sheet h2 + svg{margin-top:-14px}
#sheet .body{display:flex;flex-direction:column;gap:16px}
#sheet .body > *{margin:0}
#sheet .body ul{font-size:22px;padding-left:1.1em;margin:0}
#sheet .body ul.posts,#sheet .body ul.courses{padding:0}
#sheet iframe{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:18px;display:block}
#sheet .wp-block-embed{margin:0}
#sheet .wp-block-embed__wrapper::before{display:none}
#sheet a:not(.btn):not(.vid):not(.wp-block-button__link){color:var(--ink);text-decoration-color:var(--c,var(--red));text-underline-offset:.2em;text-decoration-thickness:2px}
#sheet .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px}
#sheet .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:23px;background:var(--ink);color:#fff;font:600 16px/1 var(--ui);text-decoration:none}
#sheet .is-style-outline .wp-block-button__link{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);border:0}
.posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.posts a{font-size:24px;color:var(--ink);text-decoration:none}
.posts time{display:block;font:500 13px/1.3 var(--ui);color:var(--ink-3)}
#sheet p{font-size:24px;line-height:1.45;margin:0;color:var(--ink)}
#sheet .meta{font-size:21px;color:var(--ink-2)}
.courses{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:22px}
.courses li{display:flex;align-items:center;gap:8px}
.courses li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.vid{display:flex;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;max-width:100%;
  border:2px dashed var(--ink-3);border-radius:18px;text-decoration:none;color:var(--ink-2);font:600 15px/1 var(--ui)}
.vid:hover{border-color:var(--ink);color:var(--ink)}
.yt{width:30px;height:21px;border-radius:6px;background:#f00;position:relative;flex:none}
.yt::after{content:"";position:absolute;left:11px;top:6px;border-left:9px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:23px;background:var(--ink);color:#fff;
  font:600 16px/1 var(--ui);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#000}
.btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.o:hover{background:#f2f2f0}
.btn:focus-visible,.back:focus-visible,.social a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mail{font:600 19px/1.3 var(--ui);word-break:break-all;-webkit-user-select:all;user-select:all}

/* köşe bilgileri */
.soc{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--ink);text-decoration:none;transition:opacity .4s,transform .25s;-webkit-tap-highlight-color:transparent}
.soc svg{overflow:visible;filter:url(#rough)}
.soc path,.soc circle{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,fill .2s}
.soc .f{fill:currentColor;stroke-width:1.4}
.soc span{font:400 22px/1 var(--hand);color:var(--ink-2);text-shadow:0 0 6px var(--paper)}
.soc:hover,.soc:focus-visible{transform:translate(-50%,-50%) rotate(0deg) scale(1.08);outline:none}
.soc-youtube:hover,.soc-youtube:focus-visible{color:#ff0033}
.soc-instagram:hover,.soc-instagram:focus-visible{color:#d62976}
.soc-patreon:hover,.soc-patreon:focus-visible{color:#f96854}
.soc:hover span,.soc:focus-visible span{color:var(--ink)}
body.focused .soc{opacity:.25}
.social.harita{display:none}
.social{position:fixed;left:20px;bottom:18px;display:flex;gap:16px;font:600 14px/1 var(--ui)}
.social a{color:var(--ink-2);text-decoration:none}
.social a:hover{color:var(--ink)}
.hint{position:fixed;right:20px;bottom:18px;font:500 13px/1.3 var(--ui);color:var(--ink-3);text-align:right;transition:opacity .4s}
body.focused .hint{opacity:0}

/* hızlı menü (basılı tut / sağ tık) */
#ring{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none}
#ring svg{position:absolute;left:-190px;top:-190px;overflow:visible}
#ring .lab{position:absolute;transform:translate(-50%,-50%);font:400 24px/1 var(--hand);white-space:nowrap;color:var(--ink);
  background:var(--paper);padding:4px 10px;border-radius:14px;transition:transform .15s,color .15s,background .15s}
#ring .lab.hot{transform:translate(-50%,-50%) scale(1.25);color:#fff;background:var(--c)}
#ring{opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s cubic-bezier(.2,.9,.3,1.3)}
#ring.open{opacity:1;transform:scale(1)}
#veil{position:fixed;inset:0;background:rgba(255,255,255,.7);opacity:0;pointer-events:none;transition:opacity .15s}
body.ringing #veil{opacity:1}

@media (max-aspect-ratio:4/5){
  #sheet{top:auto;left:12px;right:12px;bottom:12px;width:auto;height:64%;padding:22px 22px 20px;transform:translateY(calc(100% + 40px)) rotate(-1deg)}
  #sheet.open{transform:none}
  #sheet h2{font-size:38px}
  #sheet p{font-size:21px}
  .hint{display:none}
  .social{left:0;right:0;justify-content:center}
  body.focused .social{opacity:0}
}
@media (prefers-reduced-motion:reduce){#world,#sheet,#ring,.node{transition:none!important}}
@media (max-width:440px){#ring.open{transform:scale(.86)}#ring .lab{font-size:21px}}