/* ═══════════════════════════════════════════════════════════
   atalayaygul.com — MS-DOS text-mode theme
   Font: IBM VGA 8x16 (int10h.org Oldschool PC Font Pack, CC BY-SA 4.0)
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'IBM VGA';src:url('/assets/fonts/Web437_IBM_VGA_8x16.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}

/* ---------- the 16 CGA/VGA colours ---------- */
:root{
  --k0:#000000;--k1:#0000aa;--k2:#00aa00;--k3:#00aaaa;--k4:#aa0000;--k5:#aa00aa;--k6:#aa5500;--k7:#aaaaaa;
  --k8:#555555;--k9:#5555ff;--k10:#55ff55;--k11:#55ffff;--k12:#ff5555;--k13:#ff55ff;--k14:#ffff55;--k15:#ffffff;
  --f:'IBM VGA','VT323','Perfect DOS VGA 437',ui-monospace,Menlo,Consolas,monospace;
  --fs:20px;
}
/* palette: VGA (default) — blue desktop, grey text */
:root,:root[data-palette="vga"]{
  --bg:var(--k1);--fg:var(--k15);--hi:var(--k15);--em:var(--k14);--head:var(--k14);--link:var(--k11);--dim:var(--k7);
  --bar-bg:var(--k7);--bar-fg:var(--k0);--bar-hot:var(--k4);--border:var(--k7);--shadow:rgba(0,0,0,.55);
  --sel-bg:var(--k3);--sel-fg:var(--k0);--ok:var(--k10);--warn:var(--k14);--boot-bg:var(--k0);--boot-fg:var(--k7);
  /* grey dialog windows (Turbo Vision style) */
  --dlg-bg:var(--k7);--dlg-fg:var(--k0);--dlg-head:var(--k1);--dlg-link:var(--k1);--dlg-dim:var(--k1);--dlg-border:var(--k0);
  --dlg-sel-bg:var(--k1);--dlg-sel-fg:var(--k15);--dlg-btn-bg:var(--k2);--dlg-btn-fg:var(--k0);--dlg-btn-hot:var(--k4);
  --dlg-field-bg:var(--k1);--dlg-field-fg:var(--k15);--dlg-field-hi:var(--k15);--dlg-field-dim:var(--k7);--dlg-field-border:var(--k7);
}
:root[data-palette="amber"]{
  --bg:#0c0800;--fg:#e8a828;--hi:#ffc23a;--em:#ffd27a;--head:#ffd27a;--link:#ffb000;--dim:#a8781a;
  --dlg-bg:#d99a1a;--dlg-fg:#0c0800;--dlg-head:#0c0800;--dlg-link:#0c0800;--dlg-dim:#3a2600;--dlg-border:#0c0800;
  --dlg-sel-bg:#0c0800;--dlg-sel-fg:#ffc23a;--dlg-btn-bg:#0c0800;--dlg-btn-fg:#ffc23a;--dlg-btn-hot:#ffc23a;
  --dlg-field-bg:#0c0800;--dlg-field-fg:#e8a828;--dlg-field-hi:#ffc23a;--dlg-field-dim:#a8781a;--dlg-field-border:#a8781a;
  --bar-bg:#d99a1a;--bar-fg:#0c0800;--bar-hot:#0c0800;--border:#b88014;--shadow:rgba(0,0,0,.6);
  --sel-bg:#ffb000;--sel-fg:#0c0800;--ok:#ffc23a;--warn:#ffd27a;--boot-bg:#0c0800;--boot-fg:#d99a1a;
}
:root[data-palette="green"]{
  --bg:#020a03;--fg:#4de35c;--hi:#66ff66;--em:#99ff99;--head:#99ff99;--link:#33ff33;--dim:#2f9a3c;
  --dlg-bg:#33cc44;--dlg-fg:#020a03;--dlg-head:#020a03;--dlg-link:#020a03;--dlg-dim:#0a3a10;--dlg-border:#020a03;
  --dlg-sel-bg:#020a03;--dlg-sel-fg:#66ff66;--dlg-btn-bg:#020a03;--dlg-btn-fg:#66ff66;--dlg-btn-hot:#66ff66;
  --dlg-field-bg:#020a03;--dlg-field-fg:#4de35c;--dlg-field-hi:#66ff66;--dlg-field-dim:#2f9a3c;--dlg-field-border:#2f9a3c;
  --bar-bg:#33cc44;--bar-fg:#020a03;--bar-hot:#020a03;--border:#2aa337;--shadow:rgba(0,0,0,.6);
  --sel-bg:#33ff33;--sel-fg:#020a03;--ok:#66ff66;--warn:#99ff99;--boot-bg:#020a03;--boot-fg:#33cc44;
}
:root[data-palette="mono"]{
  --bg:var(--k0);--fg:var(--k7);--hi:var(--k15);--em:var(--k15);--head:var(--k15);--link:var(--k15);--dim:#8a8a8a;
  --dlg-bg:var(--k7);--dlg-fg:var(--k0);--dlg-head:var(--k0);--dlg-link:var(--k0);--dlg-dim:#333;--dlg-border:var(--k0);
  --dlg-sel-bg:var(--k0);--dlg-sel-fg:var(--k15);--dlg-btn-bg:var(--k0);--dlg-btn-fg:var(--k15);--dlg-btn-hot:var(--k15);
  --dlg-field-bg:var(--k0);--dlg-field-fg:var(--k7);--dlg-field-hi:var(--k15);--dlg-field-dim:#8a8a8a;--dlg-field-border:var(--k7);
  --bar-bg:var(--k7);--bar-fg:var(--k0);--bar-hot:var(--k0);--border:var(--k7);--shadow:rgba(255,255,255,.12);
  --sel-bg:var(--k7);--sel-fg:var(--k0);--ok:var(--k15);--warn:var(--k15);--boot-bg:var(--k0);--boot-fg:var(--k7);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:3.2em;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs)/1 var(--f);
  -webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;
  text-rendering:optimizeSpeed;overflow-x:hidden;min-height:100vh}
@media (max-width:760px){:root{--fs:16px}}
h1,h2,h3,h4{font:inherit;margin:0;color:var(--head)}
p{margin:0}
p+p,ul+p,p+ul{margin-top:1em}
a{color:var(--link);text-decoration:none}
a:hover,a:focus-visible{background:var(--sel-bg);color:var(--sel-fg);outline:none}
strong,b{font-weight:400;color:var(--em)}
em,i{font-style:normal}
ul,ol,dl{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
pre{margin:0;font:inherit;white-space:pre}
code,kbd{font:inherit}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--hi);outline-offset:0}
.sr{position:absolute;left:-9999px}
.hot{color:var(--bar-hot)}
.cur::after{content:'█';color:var(--hi);animation:blink 1s steps(1,end) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cur::after{animation:none}}

/* ---------- boot screen ---------- */
#boot{position:fixed;inset:0;z-index:1000;background:var(--boot-bg);color:var(--boot-fg);padding:1em 1ch;overflow:hidden}
#boot pre{white-space:pre-wrap;word-break:break-word}
#boot .skiphint{position:absolute;right:1ch;bottom:.5em;color:var(--k8)}
#boot .skipbtn{position:absolute;left:1ch;bottom:.5em;background:none;border:0;color:var(--k7);font:inherit;cursor:pointer;padding:0}
#boot .skipbtn:hover,#boot .skipbtn:focus-visible{background:var(--k7);color:var(--k0);outline:none}
html.booting{overflow:hidden}
html.booting .app{visibility:hidden}

/* ---------- CRT overlay ---------- */
html.crt body::after{content:'';position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}
html.crt.glow body{text-shadow:0 0 1px currentColor}

/* ---------- menu bar ---------- */
.menubar{position:sticky;top:0;z-index:100;background:var(--bar-bg);color:var(--bar-fg);height:1em;line-height:1;overflow:visible}
.mb-in{display:flex;align-items:center;gap:0;max-width:100ch;margin:0 auto;padding:0 1ch;height:1em}
.mb-items{display:flex;gap:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
@media (max-width:760px){.menubar,.mb-in{height:auto}.mb-items{flex-wrap:wrap;overflow:visible}}
.mb-items::-webkit-scrollbar{display:none}
.mb-items a{color:var(--bar-fg);padding:0 1ch;white-space:nowrap;display:inline-block;height:1em;line-height:1}
.mb-items a .hot{color:var(--bar-hot)}
.mb-items a:hover,.mb-items a:focus-visible,.mb-items a.active{background:var(--bar-fg);color:var(--bar-bg)}
.mb-items a:hover .hot,.mb-items a:focus-visible .hot,.mb-items a.active .hot{color:var(--bar-bg)}
.mb-brand{white-space:nowrap;padding:0 1ch;color:var(--bar-fg)}
.mb-brand:hover{background:var(--bar-fg);color:var(--bar-bg)}
@media (max-width:760px){.mb-brand{display:none}}

/* ---------- status bar ---------- */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--bar-bg);color:var(--bar-fg);height:1em;line-height:1;overflow:hidden}
.sb-in{display:flex;gap:2ch;max-width:100ch;margin:0 auto;padding:0 1ch;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.sb-in::-webkit-scrollbar{display:none}
.sb-in kbd{color:var(--bar-hot)}
.sb-in button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.sb-in button:hover,.sb-in button:focus-visible{background:var(--bar-fg);color:var(--bar-bg);outline:none}
.sb-in button:hover kbd,.sb-in button:focus-visible kbd{color:var(--bar-bg)}
.sb-right{margin-left:auto}
body{padding-bottom:2em}

/* ---------- screen + windows ---------- */
.screen{max-width:100ch;margin:0 auto;padding:1.5em 1ch 2em}
.win{position:relative;border:.3em double var(--border);padding:1em 2ch;margin:1.5em 0 2em;background:var(--bg);
  box-shadow:1ch .5em 0 var(--shadow)}
.win>.wt{position:absolute;top:-.55em;left:2ch;background:var(--bg);padding:0 1ch;color:var(--head);white-space:nowrap;max-width:calc(100% - 4ch);overflow:hidden;text-overflow:ellipsis}
.win>.wt::before{content:'╡ ';color:var(--border)}
.win>.wt::after{content:' ╞';color:var(--border)}
.win>.wc{position:absolute;top:-.55em;right:2ch;background:var(--bg);padding:0 1ch;color:var(--fg)}
.win>.wc a{color:var(--fg)}
.win>.wc a:hover{background:var(--sel-bg);color:var(--sel-fg)}
.win.dlg{--bg:var(--dlg-bg);--fg:var(--dlg-fg);--hi:var(--dlg-fg);--em:var(--dlg-head);--head:var(--dlg-head);--link:var(--dlg-link);
  --dim:var(--dlg-dim);--border:var(--dlg-border);--ok:var(--dlg-head);--sel-bg:var(--dlg-sel-bg);--sel-fg:var(--dlg-sel-fg);
  --bar-bg:var(--dlg-btn-bg);--bar-fg:var(--dlg-btn-fg);--bar-hot:var(--dlg-btn-hot);box-shadow:1ch .5em 0 rgba(0,0,0,.55)}
.win.dlg a:not(.dbtn){text-decoration:underline;text-underline-offset:.15em}
.win.dlg a:not(.dbtn):hover,.win.dlg a:not(.dbtn):focus-visible{text-decoration:none}
.win.dlg .prompt{--bg:var(--dlg-field-bg);--fg:var(--dlg-field-fg);--hi:var(--dlg-field-hi);--dim:var(--dlg-field-dim);--border:var(--dlg-field-border);
  --head:var(--dlg-field-hi);--ok:var(--dlg-field-hi);--warn:var(--dlg-field-hi);
  background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:1em 1ch;margin-top:1.5em}
:root[data-palette="vga"] .win.dlg .prompt{--ok:var(--k10);--warn:var(--k14);--head:var(--k14)}
.kicker{color:var(--dim)}
.win h3{color:var(--hi)}
.rule{color:var(--border);overflow:hidden;white-space:nowrap;user-select:none}
.mt{margin-top:1em}.mt2{margin-top:2em}

/* hero */
.banner{color:var(--head);font-size:min(var(--fs),calc((100vw - 64px) / 24));line-height:1;white-space:pre;margin-bottom:1em}
.banner-fallback{font-size:2em;line-height:1;color:var(--head);display:none}
.tagline{color:var(--hi)}
.spec{color:var(--link)}
.lead{margin-top:1em;max-width:78ch}
.badge{color:var(--ok)}
.btnrow{display:flex;flex-wrap:wrap;gap:1em 2ch;margin-top:1.5em}
.dbtn{display:inline-block;background:var(--bar-bg);color:var(--bar-fg);padding:0 1ch;box-shadow:.5ch .25em 0 var(--k0);white-space:nowrap}
.dbtn .hot{color:var(--bar-hot)}
.dbtn:hover,.dbtn:focus-visible{background:var(--sel-bg);color:var(--sel-fg);transform:translate(.25ch,.125em);box-shadow:.25ch .125em 0 var(--k0)}
.dbtn:hover .hot,.dbtn:focus-visible .hot{color:var(--sel-fg)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1em 2ch;margin-top:1.5em;padding-top:1em;border-top:1px solid var(--border)}
.stat .n{color:var(--head);font-size:2em;line-height:1}
.stat .l{margin-top:.5em;color:var(--fg)}
.stat .bar{display:block;color:var(--link);letter-spacing:0;margin:.35em 0 .25em}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5em 3ch;align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.prose p{max-width:70ch}
.photo-wrap{position:relative}
.ansi{font-size:clamp(3px,calc((100vw - 56px) / 64),12px);line-height:1;white-space:pre;letter-spacing:0;
  border:2px solid var(--border);display:block;width:max-content;padding:0;background:#000;color:#aaa;max-width:100%;overflow:hidden}
@media (min-width:901px){.ansi{font-size:clamp(3px,calc((min(100vw,1000px) - 128px) / 2 / 64),12px)}}
.ansi i{font-style:normal}
.f0{color:var(--k0)}.f1{color:var(--k1)}.f2{color:var(--k2)}.f3{color:var(--k3)}.f4{color:var(--k4)}.f5{color:var(--k5)}.f6{color:var(--k6)}.f7{color:var(--k7)}
.f8{color:var(--k8)}.f9{color:var(--k9)}.f10{color:var(--k10)}.f11{color:var(--k11)}.f12{color:var(--k12)}.f13{color:var(--k13)}.f14{color:var(--k14)}.f15{color:var(--k15)}
.b0{background:var(--k0)}.b1{background:var(--k1)}.b2{background:var(--k2)}.b3{background:var(--k3)}.b4{background:var(--k4)}.b5{background:var(--k5)}.b6{background:var(--k6)}.b7{background:var(--k7)}
.b8{background:var(--k8)}.b9{background:var(--k9)}.b10{background:var(--k10)}.b11{background:var(--k11)}.b12{background:var(--k12)}.b13{background:var(--k13)}.b14{background:var(--k14)}.b15{background:var(--k15)}
.photo-real{display:none;border:.3em double var(--border);max-width:100%;image-rendering:auto}
.photo-wrap.real .ansi{display:none}
.photo-wrap.real .photo-real{display:block}
.photo-cap{margin-top:.5em;color:var(--dim)}
.photo-cap button{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer}
.photo-cap button:hover,.photo-cap button:focus-visible{background:var(--sel-bg);color:var(--sel-fg);outline:none}

/* experience tree */
.tree>li{margin-top:1.5em}
.tree>li:first-child{margin-top:0}
.t-head{display:flex;flex-wrap:wrap;gap:0 2ch;justify-content:space-between;color:var(--hi)}
.t-head .co{color:var(--hi)}
.t-head .co::before{content:'■ ';color:var(--link)}
.t-date{color:var(--head);white-space:nowrap}
.t-meta{color:var(--dim);padding-left:2ch}
.role{margin-top:1em;padding-left:2ch}
.role .rh{display:flex;flex-wrap:wrap;gap:0 2ch;justify-content:flex-start;color:var(--hi)}
.role .rh h3{margin-right:auto}
.role .rh::before{content:'├─ ';color:var(--border);order:-1}
.role .rt{color:var(--dim);padding-left:3ch}
.role ul{margin-top:.5em;padding-left:3ch}
.role ul li{position:relative;padding-left:2ch;margin-top:.5em;max-width:78ch}
.role ul li::before{content:'►';position:absolute;left:0;color:var(--link)}
.role.last .rh::before{content:'└─ '}
.earlier{margin-top:1.5em;color:var(--fg)}
.earlier h3{color:var(--head)}
.earlier li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto;gap:0 2ch;margin-top:.5em}
.earlier li .e-date{color:var(--head);white-space:nowrap}
.earlier li .e-org{color:var(--fg)}
.earlier li .e-role{color:var(--hi)}
@media (max-width:760px){.earlier li{grid-template-columns:1fr;gap:0}.earlier li .e-date{color:var(--dim)}.t-date{width:100%}}

/* projects */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em 3ch;margin-top:1em}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.pwin{position:relative;border:1px solid var(--border);padding:1em 2ch}
.pwin>.pt{position:absolute;top:-.55em;left:1ch;background:var(--bg);padding:0 1ch;color:var(--hi)}
.pwin>.pt::before{content:'[■] ';color:var(--link)}
.pwin .ptag{position:absolute;top:-.55em;right:1ch;background:var(--bg);padding:0 1ch;color:var(--ok)}
.pwin .ptag.gold{color:var(--head)}
.pwin .psub{color:var(--link)}
.pwin p{margin-top:1em}
.tags{margin-top:1em;color:var(--dim);line-height:1.5}
.tags li{display:inline}
.tags li::before{content:'<'}
.tags li::after{content:'> '}

/* tables */
table.dt{border-collapse:collapse;width:100%;margin-top:1em}
table.dt th,table.dt td{text-align:left;vertical-align:top;padding:.5em 1ch;border:1px solid var(--border)}
table.dt th{color:var(--head);border-bottom:.3em double var(--border)}
table.dt td .id{color:var(--dim)}
table.dt td.d{color:var(--head);white-space:nowrap}
@media (max-width:760px){table.dt,table.dt tbody,table.dt tr,table.dt td{display:block;width:100%}table.dt thead{display:none}table.dt tr{border:1px solid var(--border);margin-top:1em}table.dt td{border:0;padding:.25em 1ch}table.dt td.d{white-space:normal}}

/* education */
.edu li{display:grid;grid-template-columns:auto 1fr;gap:0 2ch;margin-top:1em}
.edu li .d{color:var(--head);white-space:nowrap}
.edu li .h{color:var(--hi)}
.edu li .m{color:var(--dim)}
.edu li p{margin-top:.5em;max-width:70ch}
@media (max-width:760px){.edu li{grid-template-columns:1fr}}

/* skills */
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5em 3ch;margin-top:1em}
@media (max-width:900px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.skills{grid-template-columns:1fr}}
.skills h3{color:var(--head);border-bottom:1px solid var(--border);margin-bottom:.5em}
.checks li{padding-left:4ch;position:relative;margin-top:.25em}
.checks li::before{content:'[X]';position:absolute;left:0;color:var(--ok)}

/* off the clock */
.exe{display:grid;grid-template-columns:auto 1fr;gap:0 2ch;margin-top:1em;align-items:start}
.exe .name{color:var(--hi);white-space:nowrap}
.exe .name::before{content:'» ';color:var(--link)}
.exe .desc{max-width:70ch}
.exe .desc a::before{content:'['}.exe .desc a::after{content:']'}
@media (max-width:560px){.exe{grid-template-columns:1fr}}

/* contact + prompt */
.cmds dt{color:var(--hi);margin-top:1em}
.cmds dd{margin:0;padding-left:4ch}
.cmds dd a::before{content:'► ';color:var(--link)}
.prompt{margin-top:1.5em;border-top:1px solid var(--border);padding-top:1em}
.out{white-space:pre-wrap;word-break:break-word;max-height:16em;overflow-y:auto;color:var(--fg)}
.out .e{color:var(--warn)}.out .o{color:var(--ok)}.out .h{color:var(--hi)}
.pline{display:flex;align-items:center;gap:0;margin-top:.5em}
.ps1{color:var(--hi);white-space:nowrap}
.in{flex:1;min-width:0;background:transparent;border:0;color:var(--hi);font:inherit;padding:0;caret-color:var(--hi);text-transform:uppercase}
.in:focus{outline:none}
.in::placeholder{color:var(--dim);text-transform:none}
.loc{margin-top:1.5em;color:var(--dim)}

/* footer */
.foot{max-width:100ch;margin:0 auto;padding:0 1ch 3em;color:var(--dim)}
.foot a{color:var(--fg)}

/* ---------- print ---------- */
@media print{
  :root{--bg:#fff;--fg:#000;--hi:#000;--head:#000;--link:#000;--dim:#444;--border:#000;--shadow:transparent}
  body{font-size:11pt;padding:0}
  .menubar,.statusbar,#boot,.prompt,.photo-cap,.ansi{display:none!important}
  .photo-real{display:block!important}
  .win{box-shadow:none;break-inside:avoid;margin:1em 0}
  html.crt body::after{display:none}
}
