@font-face{font-family:Gloock;src:url(assets/fonts/gloock-latin-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:Gloock;src:url(assets/fonts/gloock-latin-ext-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-02AF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-02AF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-02AF}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(assets/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-02AF}

:root{
  --gece:#111410;--zeytin:#68725F;--lime:#D5FA73;--krem:#F3F0E6;
  --bas:Gloock,Georgia,serif;--yaz:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --kenar:clamp(16px,5vw,84px);
  --kaymis:.035em;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--gece);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;position:relative;overflow-x:clip;background:var(--gece);color:var(--krem);font:400 1rem/1.55 var(--yaz);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,pre,fieldset{margin:0;padding:0;border:0}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;stroke-linejoin:miter}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.kendi :focus-visible,.panel :focus-visible{outline-color:var(--gece)}

/* printed grain sits on the sheet: it scrolls with the page and never moves */
.gren{position:absolute;inset:0;z-index:40;pointer-events:none;background:url(assets/baski/gren.png) 0 0/512px 512px}

/* ---------- üst ---------- */
.ust{position:relative;min-height:max(100svh,640px);max-height:1240px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:96px var(--kenar) 21vw}
.kunye{position:absolute;z-index:6;top:clamp(18px,3vw,34px);left:var(--kenar);display:flex;align-items:center;gap:12px;font:400 1.3rem/1 var(--bas);letter-spacing:.08em}
.kunye img{width:44px;height:44px;border-radius:50%;box-shadow:2px -2px 0 var(--lime)}
.sahne,.sahne picture{position:absolute;inset:0}
.sahne img{position:absolute;will-change:transform}
.sehir{left:0;right:0;bottom:0;width:100%;min-width:1180px;height:auto;max-width:none}
.ay{width:min(38vw,70vh);right:5vw;top:max(13vh,74px)}
.bulut{height:auto}
.b1{width:24vw;left:43vw;top:9vh}
.b2{width:26vw;right:-7vw;top:55vh}
.b3{width:15vw;left:47vw;top:66vh}
.adam{height:min(84vh,58vw);right:calc(5vw + min(19vw,35vh) - min(32vh,23vw));bottom:-14vh;width:auto;max-width:none}
.ust::after{content:"";position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:clamp(30px,6vh,64px);background:var(--gece);clip-path:polygon(0 34%,9% 34%,9% 12%,14% 12%,14% 40%,31% 40%,31% 20%,33% 20%,33% 44%,58% 44%,58% 8%,66% 8%,66% 36%,82% 36%,82% 16%,84% 16%,84% 42%,100% 42%,100% 100%,0 100%)}
.ust-metin{position:relative;z-index:5;max-width:44vw;margin-bottom:5vh}
h1{font:400 clamp(4.2rem,11.4vw,11.5rem)/.88 var(--bas);letter-spacing:-.012em;text-shadow:var(--kaymis) calc(var(--kaymis)*-.7) 0 var(--zeytin);animation:kayit 1.1s steps(7) both}
h1 span{display:block}
h1 .kucuk{font-size:.4em;line-height:1.1;color:var(--lime);text-shadow:none;margin-bottom:.12em}
@keyframes kayit{from{--kaymis:.18em;text-shadow:.18em -.12em 0 var(--zeytin)}}
.ust-metin p{margin:clamp(20px,2.4vw,34px) 0 clamp(20px,2.4vw,30px);max-width:32em;font-size:clamp(1rem,1.25vw,1.2rem)}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 24px;background:var(--lime);color:var(--gece);font:600 1rem/1.1 var(--yaz);text-decoration:none;box-shadow:5px 5px 0 var(--zeytin);transition:transform .12s steps(2),box-shadow .12s steps(2)}
.dugme svg{width:20px;height:20px}
.dugme:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--zeytin)}
.dugme:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--zeytin)}

/* ---------- adımlar ---------- */
.adimlar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px);padding:clamp(44px,6vw,84px) var(--kenar) 0;position:relative;z-index:2}
.adimlar li{display:flex;gap:16px;align-items:flex-start;line-height:1.4}
.adimlar b{flex:none;width:58px;height:82px;display:grid;place-items:center;background:var(--lime);color:var(--gece);font:400 2.5rem/1 var(--bas);box-shadow:3px -3px 0 var(--zeytin)}
.adimlar span{padding-top:4px}

/* ---------- duvar ---------- */
.duvar{padding:clamp(72px,10vw,150px) var(--kenar) clamp(110px,14vw,210px);position:relative}
.duvar h2{font:400 clamp(4rem,14vw,14rem)/.9 var(--bas);color:var(--zeytin);margin-bottom:clamp(30px,5vw,70px);text-shadow:.022em -.016em 0 var(--lime)}
.posterler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3vw,44px) clamp(22px,2.4vw,36px)}
.poster{position:relative;display:block;width:100%;height:100%;text-align:left;color:var(--gece);transition:transform .18s steps(3)}
.poster::before{content:"";position:absolute;inset:0;background:var(--zeytin);transform:translate(8px,8px);transition:transform .18s steps(3),background-color .18s steps(2)}
.poster-kagit{position:relative;display:flex;flex-direction:column;height:100%;background:var(--krem);padding:12px;transition:opacity .2s steps(3)}
.poster video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--gece);flex:none}
.poster-yazi{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 4px 6px}
.poster-ad{display:block;font:400 clamp(1.7rem,2.2vw,2.25rem)/1.05 var(--bas);letter-spacing:-.005em}
.poster-kisa{font-weight:500;font-size:.9rem;line-height:1.4;margin:8px 0 14px}
.poster-iyi{margin-top:auto;padding:10px 54px 0 0;min-height:64px;font-size:.84rem;line-height:1.4;border-top:2px solid var(--gece)}
.poster-iyi b{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;display:block}
.ok{position:absolute;right:4px;bottom:6px;width:42px;height:42px;background:var(--gece);color:var(--lime);display:grid;place-items:center;transition:transform .14s steps(2)}
.ok svg{width:22px;height:22px}
.bant{position:absolute;z-index:2;top:-12px;left:50%;width:96px;height:24px;margin-left:-48px;background:var(--lime);clip-path:polygon(0 0,2% 25%,0 50%,2% 75%,0 100%,100% 100%,98% 75%,100% 50%,98% 25%,100% 0)}
.poster:hover,.poster:focus-visible{transform:translate(-2px,-2px)}
.poster:hover::before,.poster:focus-visible::before{transform:translate(12px,12px);background:var(--lime)}
.poster:hover .ok{transform:translate(3px,0)}
.poster.bekle{transform:translateY(22px)}
.poster.bekle .poster-kagit,.poster.bekle::before,.poster.bekle .bant{opacity:0}

/* ---------- kendi ---------- */
.kendi{position:relative;z-index:4;margin-top:-30px;background:var(--krem);color:var(--gece);padding:clamp(84px,9vw,140px) var(--kenar) clamp(56px,5vw,80px);
  clip-path:polygon(0 12px,8% 26px,17% 6px,29% 24px,41% 4px,52% 22px,64% 8px,76% 28px,88% 8px,100% 26px,100% 100%,0 100%)}
.kendi-ust{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,4vw,60px);align-items:center}
.etiket{font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;margin-bottom:18px}
.kendi h2{font:400 clamp(2.9rem,7.6vw,7.6rem)/.96 var(--bas);letter-spacing:-.008em;text-shadow:.03em -.02em 0 var(--lime)}
.kendi-metin{margin-top:clamp(20px,2.6vw,34px);max-width:34em;font-size:clamp(1rem,1.3vw,1.2rem)}
.kendi code{font:600 1em var(--yaz);background:var(--gece);color:var(--lime);padding:.08em .4em}
.makas{width:100%;max-width:480px;justify-self:end}
.kelimeler{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(34px,5vw,64px) 0}
.kelimeler a{display:inline-block;padding:9px 13px;color:var(--gece);background:transparent;border:2px solid var(--gece);text-decoration:none;font-weight:500;font-size:.95rem;line-height:1.25}
.kelimeler li:nth-child(3n) a{background:var(--lime)}
.kelimeler a:hover{background:var(--gece);color:var(--lime)}
.skill{background:var(--gece);color:var(--krem);box-shadow:9px 9px 0 var(--zeytin)}
.skill-ust{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(14px,2vw,24px);border-bottom:2px solid var(--zeytin)}
.skill-ust code{background:none;color:var(--lime);padding:0;font-weight:500;font-size:clamp(.78rem,1.1vw,1rem);overflow-wrap:anywhere}
.kucuk-dugme{min-height:44px;padding:8px 18px;box-shadow:none;flex:none}
.kucuk-dugme:hover{box-shadow:none;transform:none;background:var(--krem)}
.skill pre{max-height:380px;overflow:auto;padding:clamp(14px,2vw,24px);font:400 .86rem/1.6 var(--yaz);white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:var(--zeytin) var(--gece)}

/* ---------- alt ---------- */
.alt{position:relative;z-index:5;margin-top:-30px;background:var(--gece);padding-top:clamp(40px,4vw,64px);text-align:center;overflow:hidden;
  clip-path:polygon(0 24px,10% 8px,22% 26px,36% 10px,50% 28px,63% 6px,77% 24px,89% 8px,100% 22px,100% 100%,0 100%)}
.alt p{position:relative;z-index:1;padding:0 var(--kenar);font:400 clamp(1.3rem,2vw,1.8rem)/1.2 var(--bas)}
.alt p img{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;box-shadow:3px -3px 0 var(--lime)}
.alt strong{font-weight:400;color:var(--lime)}
.alt-yt{position:relative;z-index:1;display:inline-block;margin-top:8px;color:var(--lime);transition:transform .15s}
.alt-yt:hover{transform:scale(1.12)}
.ufuk{width:100%;min-width:900px;max-width:none;margin:-9vw auto 0;position:relative;left:50%;transform:translateX(-50%)}

/* ---------- panel ---------- */
.panel{position:fixed;inset:0;margin:auto;width:min(980px,calc(100vw - 32px));height:min(740px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;border:0;background:none;color:var(--gece);overflow:visible;opacity:0;transform:translateY(14px) scale(.97);transition:transform .16s ease-in,opacity .16s linear}
.panel.acik{opacity:1;transform:none;transition:transform .34s cubic-bezier(.2,1.3,.4,1),opacity .12s linear}
.panel::backdrop{background:rgba(17,20,16,.82);opacity:0;transition:opacity .2s linear}
.panel.acik::backdrop{opacity:1}
.panel-kagit{height:100%;display:flex;flex-direction:column;background:var(--krem);position:relative;box-shadow:0 0 0 var(--lime);transition:box-shadow .16s steps(3)}
.panel.acik .panel-kagit{box-shadow:10px 10px 0 var(--lime);transition:box-shadow .22s steps(4) .12s}
.panel-kagit::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:url(assets/baski/gren.png) 0 0/512px}
.panel-ust{display:flex;gap:10px;align-items:stretch;border-bottom:3px solid var(--gece);flex:none}
.sekmeler{display:flex;overflow-x:auto;flex:1;scrollbar-width:none}
.sekmeler button{flex:none;padding:0 15px;min-height:56px;font:500 .86rem/1.1 var(--yaz);white-space:nowrap}
.sekmeler button[aria-pressed=true]{background:var(--gece);color:var(--lime)}
.sekmeler button:hover:not([aria-pressed=true]){background:var(--lime)}
.sekmeler button:focus-visible{outline-offset:-6px}
.sekmeler button[aria-pressed=true]:focus-visible{outline-color:var(--lime)}
.kapat{flex:none;width:56px;display:grid;place-items:center;border-left:3px solid var(--gece)}
.kapat svg{width:24px;height:24px}
.kapat:hover{background:var(--gece);color:var(--lime)}
.panel-govde{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px clamp(16px,3.4vw,28px) 28px;scrollbar-color:var(--zeytin) var(--krem)}
.panel-govde video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--gece)}
.panel h2{font:400 clamp(2.5rem,7vw,3.6rem)/1 var(--bas);margin-top:18px}
.p-kisa{font-weight:500;margin-top:8px;line-height:1.4}
.p-iyi{margin-top:4px;line-height:1.4;font-size:.92rem}
.p-iyi span{font-weight:600}
.p-iyi b{font-weight:400}
#ayarlar{margin-top:20px;border-top:3px solid var(--gece)}
.alan{padding:14px 0;border-bottom:1px solid var(--gece)}
.alan>label:not(.anahtar),legend{display:block;float:left;width:100%;font-weight:600;font-size:.86rem;margin-bottom:9px;padding:0}
.konu-satir{clear:both;display:flex;gap:8px}
#konu{flex:1;min-width:0;height:50px;padding:0 12px;background:#fff0;border:2px solid var(--gece);border-radius:0;font-size:16px;font-weight:500}
#konu::placeholder{color:var(--zeytin);opacity:1}
#konu:focus{outline:3px solid var(--lime);outline-offset:0;background:var(--krem)}
#ornek{flex:none;padding:0 13px;min-height:50px;border:2px solid var(--gece);font-weight:500;font-size:.86rem}
#ornek:hover{background:var(--lime)}
.secim{clear:both;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.secim label{position:relative;cursor:pointer}
.secim input,.anahtar input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.secim span{display:grid;place-items:center;height:100%;min-height:46px;padding:6px;text-align:center;border:2px solid var(--gece);font-weight:500;font-size:.88rem;line-height:1.15}
.secim label:hover span{background:var(--lime)}
.secim input:checked+span{background:var(--gece);color:var(--lime)}
.secim input:focus-visible+span,.anahtar input:focus-visible+i{outline:3px solid var(--gece);outline-offset:2px}
.anahtarlar{display:grid;gap:2px;padding:8px 0}
.anahtar{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:500}
.anahtar i{flex:none;width:48px;height:26px;border:2px solid var(--gece);position:relative}
.anahtar i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--gece);transition:transform .1s steps(2)}
.anahtar input:checked+i{background:var(--lime)}
.anahtar input:checked+i::after{transform:translateX(22px)}
.prompt{margin-top:18px;max-height:300px;min-height:150px;overflow:auto;padding:16px;background:var(--gece);color:var(--krem);font:400 .8rem/1.6 var(--yaz);white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:var(--zeytin) var(--gece)}
.prompt mark{background:none;color:var(--lime);font-weight:500}
.prompt:focus-visible{outline-color:var(--zeytin)}
.panel-alt{flex:none;padding:12px clamp(16px,3.4vw,28px) max(14px,env(safe-area-inset-bottom));border-top:3px solid var(--gece);background:var(--krem);position:relative;z-index:1}
.kopyala{width:100%;min-height:60px;font-size:1.08rem;box-shadow:5px 5px 0 var(--gece);border:2px solid var(--gece)}
.kopyala:hover{box-shadow:3px 3px 0 var(--gece)}
.kopyala:active{box-shadow:0 0 0 var(--gece)}
.kopyala.oldu{background:var(--gece);color:var(--lime)}

/* ---------- telefon ---------- */
@media (min-width:880px){
  .panel-govde{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(150px,1fr);column-gap:28px;align-content:stretch}
  .panel-govde>*{grid-column:1}
  #ayarlar{grid-column:2;grid-row:1/-1;margin-top:0;align-self:start}
  .prompt{max-height:none}
}
@media (max-width:1240px){
  .posterler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poster-ad{font-size:clamp(1.9rem,4vw,2.6rem)}
}
@media (max-width:1000px){
  .adimlar{grid-template-columns:1fr 1fr}
  .kendi-ust{grid-template-columns:1fr}
  .makas{justify-self:start;max-width:min(360px,80%)}
}
@media (max-width:760px){
  .ust{min-height:0;max-height:none;justify-content:flex-start;padding:92px var(--kenar) 142vw}
  .ust-metin{max-width:none;margin:0}
  h1{font-size:clamp(4.4rem,23vw,8rem)}
  .sehir{min-width:0;bottom:-16vw}
  .ay{width:64vw;right:-6vw;top:auto;bottom:88vw}
  .b1{width:52vw;left:-14vw;top:auto;bottom:112vw}
  .b2{width:56vw;right:-22vw;top:auto;bottom:84vw}
  .b3{display:none}
  .adam{height:112vw;right:1vw;bottom:-32vw}
  .posterler{grid-template-columns:minmax(0,1fr);gap:36px}
  .poster::before{transform:translate(6px,6px)}
  .adimlar{grid-template-columns:1fr;gap:14px}
  .adimlar li{align-items:center}
  .adimlar b{width:46px;height:64px;font-size:2rem}
  .skill{box-shadow:6px 6px 0 var(--zeytin)}
  .panel{width:calc(100vw - 20px);height:calc(100dvh - 20px)}
  .panel.acik .panel-kagit{box-shadow:5px 5px 0 var(--lime)}
  .kelimeler a{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .poster.bekle{transform:none}
  .poster.bekle .poster-kagit,.poster.bekle::before,.poster.bekle .bant{opacity:1}
}

.alt .ufuk{margin-top:min(-90px,-19vw)}