/* page mode: after the intro the name flies to the header, the contacts become header icons, the frame
   corners open to the viewport corners, and the sections reveal as they scroll in. Without JS (or with
   reduced motion) the page is shown directly and nothing is hidden. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--hd:64px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- modes ---- */
.top,.vf,.page{display:none}
html:not(.js) .stage,.pg .stage{display:none}
html:not(.js) .top,.pg .top{display:flex}
html:not(.js) .vf,.pg .vf,html:not(.js) .page,.pg .page{display:block}
/* intro is leaving: it stays pinned over the page while the ghosts fly, its flown parts hidden, and the rest
   unwinds (page.js); arrows and row brackets fade */
.pg-in .stage.out:not(.gone){display:grid;position:fixed;z-index:29;margin:0;pointer-events:none}
.pg-in .stage.out :is(.name,.br,.lines){visibility:hidden}
/* while the ghosts fly, their landing spots are laid out but invisible */
.pg-in .top .bn,.pg-in .top .ib,.pg-in .vf .br{opacity:0}
/* the icons take over from their ghosts at once (a fade here reads as a blink); only their boxes are drawn,
   growing out of the icon with a teal edge that cools to the hairline */
.js.pg:not(.pg-in) .top .ib::before{animation:ibBox .5s var(--out) backwards}
@keyframes ibBox{from{inset:21px;opacity:0;border-color:var(--teal)}40%{opacity:1}}
/* the header's buttons are drawn in one after another: each mark drops in while its box grows out of it */
.js.pg:not(.pg-in) .top .links>* :is(.hk,.ct,.dk){animation:cvIn .5s .12s var(--out) backwards}
.js.pg:not(.pg-in) .top .links>:nth-child(2) :is(.hk,.ct){animation-delay:.2s}
.js.pg:not(.pg-in) .top .links>:nth-child(3) .hk{animation-delay:.28s}
.js.pg:not(.pg-in) .top .links>:nth-child(4) .hk{animation-delay:.36s}
.js.pg:not(.pg-in) .top .links>:nth-child(5) .hk{animation-delay:.44s}
.dil .dk{flex:none;width:18px;font:500 11px/18px var(--mono);letter-spacing:.06em;text-align:center}
@media (max-width:400px){.top .links .dil{display:none}} /* no room: the footer link remains */
@keyframes cvIn{from{opacity:0;transform:translateY(-5px)}}
.pg-in .top{background:transparent;border-color:transparent}
.ghosts{position:fixed;inset:0;z-index:30;pointer-events:none}
.ghosts .g-name{position:fixed;display:block;margin:0;font:500 1px/1 "Rajdhani",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;color:var(--ink);transform-origin:0 0}
.ghosts .g-br{position:fixed;right:auto;bottom:auto}
.ghosts .g-tx{position:fixed;display:block;margin:0;white-space:nowrap;line-height:normal;transform-origin:0 0}

/* ---- header ---- */
.top{position:fixed;z-index:20;top:0;left:0;right:0;height:var(--hd);align-items:center;justify-content:space-between;
  padding:1px 11px 0 24px;background:linear-gradient(var(--hd1),var(--hd2));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);transition:background .6s,border-color .6s}
/* left: the name's ink starts 13px inside the corner bracket (chosen by eye); right: the last icon box sits in
   its bracket like the scroll cue in the bottom one, 6px from both lines (9px on phones; the box is drawn 6px
   inside its button). The 1px top padding centres the row on the whole bar, border included, so the boxes sit
   on whole pixels */
.brand{color:var(--ink);text-decoration:none;padding:8px 0}
.bn{display:inline-block;font:500 22px/1 "Rajdhani",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;margin:0 -.1em 0 -.07em} /* left: the C's side bearing */
/* at rest a teal light runs through the name's letters now and then, and at once on hover */
@media (prefers-reduced-motion:no-preference){
  .js.pg:not(.pg-in) .bn{background:linear-gradient(100deg,var(--ink) 42%,var(--flare) 48%,var(--teal) 50%,var(--ink) 58%) 100% 0/300% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:bnSweep 9s 2.5s infinite}
  .js.pg:not(.pg-in) .brand:hover .bn{animation:bnHover 1s var(--io)}
}
@keyframes bnSweep{0%{background-position:100% 0}14%,100%{background-position:0 0}}
@keyframes bnHover{from{background-position:100% 0}to{background-position:0 0}}
@media (forced-colors:active){.bn{background:none;color:CanvasText}}
.brand:focus-visible,.ib:focus-visible,.foot a:focus-visible{outline:1px solid var(--teal);outline-offset:4px}
.links{display:flex;gap:6px}
.ib{position:relative;display:grid;place-items:center;width:42px;height:42px;color:var(--dim);transition:color .25s}
.ib::before{content:"";position:absolute;inset:6px;border:1px solid var(--hair);transition:border-color .25s,inset .25s var(--out)}
.ib:hover,.ib:focus-visible{color:var(--tealx)}
.ib:hover::before,.ib:focus-visible::before{border-color:var(--teal);inset:3px}
.hk{flex:none;width:18px;height:18px}
/* contact buttons: hovering or focusing one prints its value out of the box beside the icon (page.js) */
.links .ib{display:flex;width:auto;padding:0 12px;text-decoration:none}
.xv{font:400 13px/1 var(--mono);letter-spacing:.03em;white-space:nowrap;color:var(--ink);transition:padding .15s}
.links .ib.op .xv{padding-right:10px}
/* CV: "CV" and a file icon; a small list of the Turkish and English CVs drops down from it */
.cvm{position:relative;display:flex}
.cvb{gap:7px;margin:0;background:none;border:0;font:inherit;cursor:pointer}
.cvb .ct{flex:none;font:500 11px/18px var(--mono);letter-spacing:.08em}
.cvm.acik .cvb{color:var(--tealx)}
.cvm.acik .cvb::before{border-color:var(--teal);inset:3px}
.cvb:focus-visible{outline:1px solid var(--teal);outline-offset:4px}
.cvl{position:absolute;right:6px;top:calc(100% + 2px);z-index:21;min-width:178px;margin:0;padding:6px;list-style:none;
  background:var(--menu);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--hair)}
.cvl::before,.cvl::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--teal);opacity:.7;pointer-events:none}
.cvl::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.cvl::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.cvl a{display:flex;align-items:center;gap:10px;padding:10px;color:var(--ink);text-decoration:none;font:400 13px/1 var(--mono);letter-spacing:.03em;transition:background-color .2s,color .2s}
.cvl b{font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--tealx);border:1px solid rgba(var(--gt),calc(.45*var(--gf)));padding:3px 4px 2px}
.cvl a span{margin-left:auto;font-size:10px;letter-spacing:.14em;color:var(--mute)}
.cvl a:hover,.cvl a:focus-visible{background:rgba(var(--gt),calc(.08*var(--gf)));color:var(--tealx)}
.cvl a:focus-visible{outline:1px solid var(--teal);outline-offset:-1px}
@media (prefers-reduced-motion:no-preference){.cvl:not([hidden]){animation:cvlIn .24s var(--out)}}
@keyframes cvlIn{from{opacity:0;transform:translateY(-4px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-2px)}}
.links .ib.ty .xv::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:.12em;vertical-align:-.16em;
  background:var(--teal);box-shadow:0 0 8px rgba(var(--g),calc(.6*var(--gk)))}
.hk path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.prog{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--teal);box-shadow:0 0 8px rgba(var(--g),calc(.6*var(--gk)));transform-origin:0 50%;transform:scaleX(0)}

/* ---- scroll cue: bottom right, mirroring the header's icon buttons inside the bottom-right corner ---- */
.nx{display:none}
.pg .nx{display:grid;position:fixed;z-index:20;right:11px;bottom:calc((var(--hd) - 42px)/2);
  transition:opacity .5s,transform .5s var(--out),visibility 0s,color .25s}
.pg .nx.off{opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
/* glass behind the box like the header's, so content passing beneath stays out of the way */
.nx::before{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nx .hk{position:relative}
/* a teal drop runs down the stem now and then */
.nx .dr{stroke:var(--teal);opacity:0}
/* theme switch: left of the scroll cue, the same box; its half-filled disc turns over with the theme */
.tm{display:none}
.pg .tm{display:grid;position:fixed;z-index:20;right:59px;bottom:calc((var(--hd) - 42px)/2);margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.tm::before{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tm .hk{position:relative;transition:transform .6s var(--io)}
.tm .tm-f{fill:currentColor;stroke:none}
:root[data-tema=acik] .tm .hk{transform:rotate(180deg)}
@media (prefers-color-scheme:light){:root:not([data-tema=koyu]) .tm .hk{transform:rotate(180deg)}}
.pg-in .tm{opacity:0}
.js.pg:not(.pg-in) .tm::before{animation:ibBox .5s var(--out) backwards}
/* the theme change spreads from the switch as a circle (page.js animates it); no default cross-fade */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:no-preference){.pg .nx:not(.off) .dr{animation:drop 2.6s var(--io) 1s infinite}}
@keyframes drop{0%{transform:none;opacity:0}12%{opacity:1}55%{transform:translateY(9px);opacity:0}100%{transform:translateY(9px);opacity:0}}

/* ---- viewport frame ---- */
.vf{position:fixed;inset:10px;z-index:25;pointer-events:none}

/* ---- page ---- */
.page{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 clamp(20px,6vw,72px);color:var(--text);font:300 17px/1.65 var(--sans)}
/* full-page sections: every section is one screen and scrolling settles on the next one */
.sec{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hd) + clamp(28px,6vh,64px)) 0 clamp(28px,6vh,64px);scroll-snap-align:start}
/* a page's content box fills it; on full-page screens page.js scales it down when it would not fit one screen */
.sx{display:flex;flex-direction:column;flex:1 0 auto;justify-content:inherit;transform-origin:0 0}
html.pg,html:not(.js){scroll-padding-top:0;scroll-snap-type:y proximity}
@media (min-width:900px) and (min-height:620px){
  html.pg,html:not(.js){scroll-snap-type:y mandatory}
  .sec{scroll-snap-stop:always}
}
.sh{position:relative;display:flex;align-items:center;gap:14px;font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.sh .hl{flex:1;height:6px;background:linear-gradient(var(--hair),var(--hair)) 0 0/100% 1px no-repeat,
  repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px var(--u)) 0 100%/100% 5px no-repeat;transform-origin:0 50%}
.st{margin:22px 0 40px;font:500 clamp(32px,5vw,58px)/1.04 "Rajdhani",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.sx>.ro{margin-top:auto}
.sub{margin:22px 0 0;max-width:52ch;font-size:clamp(17px,1.6vw,20px);color:var(--sub)}
.dot{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(var(--g),calc(.8*var(--gk)));vertical-align:1px}
.draft{color:var(--draft);font:400 13px/1.5 var(--mono)}
.prose p{max-width:64ch;margin:0 0 22px;font-size:clamp(17px,1.5vw,19px);line-height:1.75}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border:1px solid var(--hair);background:var(--panel);transition:border-color .3s,transform .3s var(--out)}
.card::before,.card::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--teal);opacity:var(--cn-o,.55);transition:opacity .3s,transform .3s var(--out)}
.card::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.card::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.card:hover{border-color:rgba(var(--gt),calc(.32*var(--gf)));transform:translateY(-3px)}
.card:hover::before{opacity:1;transform:translate(-3px,-3px)}
.card:hover::after{opacity:1;transform:translate(3px,3px)}
.ci{width:24px;height:24px;color:var(--teal)}
.ci path{fill:none;stroke:currentColor;stroke-width:var(--sw,1.2);stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.card h3{margin:16px 0 8px;font:500 23px/1.1 "Rajdhani",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.card p{margin:0;font-size:15px;line-height:1.65;color:var(--cardp)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.card .tags{margin-top:auto;padding-top:18px} /* badges sit on the card floor: every card in a row ends full */
.tags li{flex:1 0 auto;padding:5px 9px;border:1px solid var(--hair);font:400 11px/1 var(--mono);letter-spacing:.04em;text-align:center;color:var(--mute)} /* each row filled edge to edge */

.tline{position:relative;margin:0;padding:0 0 0 34px;list-style:none}
.tline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--teal),var(--hair) 40%,var(--hair));transform-origin:50% 0}
.tline li{position:relative;padding:0 0 44px}
.tline li:last-child{padding-bottom:0}
.tline li::before{content:"";position:absolute;left:-33px;top:6px;width:9px;height:9px;border:1px solid var(--teal);background:var(--bg);transform:rotate(45deg)}
.tline li:first-child::before{background:var(--teal);box-shadow:0 0 12px rgba(var(--g),calc(.7*var(--gk)))}
.when{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tealx)}
.tline h3{margin:12px 0 8px;font:500 26px/1.1 "Rajdhani",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.tline h3 span{color:var(--mute)}
.tline p{margin:0;max-width:60ch}

/* full-page screens: always three columns (six cards = two full rows), so a page that page.js scales down
   (laid out wider) cannot grow a ragged fourth column */
@media (min-width:900px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

.last{padding-bottom:0}
.last .sx>.sh,.last .foot{margin-top:auto}
.clist{max-width:640px;margin:36px 0 0;padding:0;list-style:none}
.clist .row{font-size:15px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:24px 0 32px;border-top:1px solid var(--hair);font-size:14px;color:var(--mute)}
.foot .mono{font:400 12px/1 var(--mono);letter-spacing:.08em}
.foot a{color:var(--mute);text-decoration:none;padding:8px 0;transition:color .25s}
.foot a:hover{color:var(--tealx)}

@media (max-width:560px){
  :root{--hd:58px}
  .bn{font-size:18px}
  .ib{width:38px;height:38px}
  .links .ib{width:auto;padding:0 10px}
  .pg .nx{right:10px;bottom:calc((var(--hd) - 38px)/2)}
  .pg .tm{right:54px;bottom:calc((var(--hd) - 38px)/2)}
  .vf{inset:6px}
  .top{padding:1px 10px 0 17px}
}

/* ---- scroll reveals (only with motion: without .js nothing is hidden) ---- */
.js.pg .rv:not(.in){opacity:0}
.js.pg .rv-up.in{animation:rvUp .8s var(--out) var(--d,0s) both}
.js.pg .rv-fold.in{transform-origin:50% 0;animation:rvFold .75s var(--io) var(--d,0s) both}
.js.pg .rv-scan.in{position:relative;animation:rvClip .9s var(--io) var(--d,0s) both}
.js.pg .rv-scan.in::after{content:"";position:absolute;inset:0 auto 0 0;width:100%;border-right:1px solid var(--teal);pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(var(--g),calc(.8*var(--gk))));animation:rvLine .9s var(--io) var(--d,0s) both,rvLineO 1.25s linear var(--d,0s) both}
.js.pg .sh.in .hl{animation:hl 1.1s var(--out) calc(var(--d,0s) + .35s) both}
.js.pg .tline:not(:has(li.in))::before{transform:scaleY(0)}
.js.pg .tline:has(li.in)::before{animation:tl 1.6s var(--io) both}
.js.pg .card.in .ci{animation:pulse 1.2s var(--out) calc(var(--d,0s) + .5s) both}
.js.pg .dot{animation:beat 2.4s ease-in-out infinite}
@keyframes rvUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rvFold{from{opacity:0;transform:perspective(900px) rotateX(-90deg)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes rvClip{from{opacity:1;clip-path:inset(-20% 100% -20% 0)}to{opacity:1;clip-path:inset(-20% -2% -20% 0)}}
@keyframes rvLine{from{transform:translateX(-100%)}to{transform:none}}
@keyframes rvLineO{0%{opacity:0}8%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes hl{from{transform:scaleX(0)}to{transform:none}}
@keyframes tl{from{transform:scaleY(0)}to{transform:none}}
@keyframes pulse{0%{filter:drop-shadow(0 0 0 rgba(var(--g),0))}35%{filter:var(--pk,drop-shadow(0 0 8px rgba(var(--g),calc(.9*var(--gk)))))}100%{filter:drop-shadow(0 0 0 rgba(var(--g),0))}}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.js.pg .dot{animation:none}}

/* the readout row stands at the foot of the first page, under the cards */
@media (min-width:900px){#uzmanlik .cards{margin-bottom:24px}}
/* short desktop screens (e.g. 1280x720): the skills page keeps its six cards on one screen */
@media (min-width:900px) and (max-height:820px){
  #uzmanlik .st{margin:14px 0 22px;font-size:clamp(28px,4vw,44px)}
  #uzmanlik .cards{gap:12px}
  #uzmanlik .card{padding:16px 20px 14px}
  #uzmanlik .ci{width:20px;height:20px}
  #uzmanlik .card h3{margin:10px 0 6px;font-size:20px}
  #uzmanlik .card p{font-size:14px;line-height:1.5}
  #uzmanlik .tags{padding-top:10px}
}
/* ...and the timeline keeps its entries large enough to read */
@media (min-width:900px) and (max-height:820px){
  #deneyim .st{margin:14px 0 26px;font-size:clamp(28px,4vw,44px)}
  .tline li{padding-bottom:24px}
  .tline h3{margin:8px 0 6px;font-size:22px}
}

/* ---- readout row: a technical-drawing title block at the foot of the first page ---- */
.ro{position:relative;display:grid;grid-template-columns:1fr;margin:56px 0 0;padding:0;border:1px solid var(--hair);background:var(--robg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ro::before,.ro::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--teal);opacity:var(--cn-o,.6);pointer-events:none}
.ro::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.ro::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.ro .rc{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 20px 16px;border-top:1px solid var(--hair)}
.ro .rc:first-child{border-top:0}
.ro dt{display:flex;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ro dt::after{content:"";flex:1;height:5px;max-width:56px;background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 7px) 0 100%/100% 5px no-repeat}
.ro dd{margin:0;display:flex;align-items:center;gap:8px;min-height:30px;font:500 19px/1.1 "Rajdhani",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ro dd svg{flex:none;width:16px;height:16px;color:var(--teal)}
/* the intro's role line lands here: sector — DevOps */
.ro .rs{color:var(--mute)}
.ro .rd{color:var(--tealx)}
.ro dd svg *{fill:none;stroke:currentColor;stroke-width:var(--swr,1.2);stroke-linecap:square;vector-effect:non-scaling-stroke}
.ro ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ro li{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--hair);background:rgba(var(--k),.03);
  white-space:nowrap;font:500 17px/1 "Rajdhani",system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.ro li b{font:400 10px/1 var(--mono);letter-spacing:.12em;color:var(--tealx)}
@media (min-width:900px){
  .ro{grid-template-columns:minmax(0,1fr) auto auto auto}
  .ro .rc{padding:14px 14px 16px;border-top:0;border-left:1px solid var(--hair)}
  .ro .rc:first-child{border-left:0}
  .ro ul{flex-wrap:nowrap;gap:5px}
  .ro li{padding:0 8px;gap:6px;font-size:15px;letter-spacing:.035em}
  .ro dd{white-space:nowrap;font-size:16px;letter-spacing:.04em}
  .ro .rc-s dd{white-space:normal}
  .ro dt::after{max-width:40px}
}
@media (min-width:900px) and (max-width:1100px){
  .ro .rc{padding:14px 11px 16px}
  .ro ul{gap:4px}
  .ro li{padding:0 6px;gap:4px}
}
@media (max-width:899px){#uzmanlik .cards{margin-bottom:28px}}
/* entrance: the title block is plotted. The frame is ruled out from its centre (top and bottom rules in teal,
   cooling to hairlines), the corner ticks flash in, then one pen steps along the cells left to right: on each
   cell it streaks the top edge, and where it arrives it draws that cell's separator, which settles into the
   hairline. Each cell fills in behind it: label wiped in, tick strip marked off one by one, value wiped in /
   chips stamped / crosshair locked on. Keyed to .in only (no --d), so it replays whenever the page comes back;
   nothing fills forwards, so the end state is the plain layout. Total about 2.2 s. */
.ro .rc::before,.ro .rc::after{content:"";position:absolute;pointer-events:none;opacity:0;background:var(--teal)}
.ro .rc::before{left:-1px;top:0;bottom:0;width:1px}
.ro .rc:first-child::before{display:none}
.ro .rc::after{left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,rgba(var(--gt),0),var(--teal) 70%,var(--flare))}
/* their glow lives in the keyframes only: a resting box-shadow, even under opacity 0, shifts the tick strips' raster */
.ro .rc-k dd{position:relative}
.ro .rc-k dd::before{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border:1px solid var(--teal);border-radius:50%;opacity:0;pointer-events:none}
/* the pen reaches each cell as the previous one ends (stagger = its travel time, .27 s) */
.ro .rc:nth-child(1){--b:.35s}.ro .rc:nth-child(2){--b:.62s}.ro .rc:nth-child(3){--b:.89s}.ro .rc:nth-child(4){--b:1.16s}
.js.pg .ro.in{animation:roBox .6s var(--io) backwards}
.js.pg .ro.in::before,.js.pg .ro.in::after{animation:roCorner .8s var(--out) .4s backwards}
.js.pg .ro.in::after{transform-origin:100% 100%}
.js.pg .ro.in::before{transform-origin:0 0}
.js.pg .ro.in .rc{animation:roRule calc(var(--b) + .4s) linear}
.js.pg .ro.in .rc::before{animation:roSep .8s var(--io) var(--b)}
.js.pg .ro.in .rc::after{transform-origin:0 50%;animation:roPen .55s var(--io) var(--b)}
.js.pg .ro.in dt{animation:roWipe .4s var(--io) calc(var(--b) + .1s) backwards}
.js.pg .ro.in dt::after{animation:roMark .45s steps(7,end) calc(var(--b) + .45s) backwards}
.js.pg .ro.in .rc-s dd,.js.pg .ro.in .rc-k dd{animation:roWipe .5s var(--io) calc(var(--b) + .22s) backwards}
.js.pg .ro.in li{animation:roChip .55s var(--out) calc(var(--b) + .3s + var(--j,0) * .09s) backwards}
.js.pg .ro.in li:nth-child(2){--j:1}.js.pg .ro.in li:nth-child(3){--j:2}
.js.pg .ro.in li b{animation:roNum .5s linear calc(var(--b) + .52s + var(--j,0) * .09s) backwards}
.js.pg .ro.in .rc-k dd svg{animation:roLock .7s var(--out) calc(var(--b) + .25s) backwards}
.js.pg .ro.in .rc-k dd::before{animation:roPing .6s var(--out) calc(var(--b) + .42s)}
/* stacked cells: the separators are top rules, drawn left to right under the pen (after the rules above) */
@media (max-width:899px){
  .ro .rc::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:1px;transform-origin:0 50%}
  .js.pg .ro.in .rc::before{animation-name:roSepH}
}
@keyframes roBox{from{opacity:0;clip-path:inset(-8px 50% -8px 50%);border-color:rgba(var(--gt),calc(.6*var(--gf)))}35%{opacity:1}
  70%{border-color:rgba(var(--gt),calc(.6*var(--gf)))}to{opacity:1;clip-path:inset(-8px);border-color:var(--hair)}}
@keyframes roCorner{0%{opacity:0;transform:scale(2.6);filter:drop-shadow(0 0 6px rgba(var(--g),calc(.9*var(--gk))))}35%{opacity:1}
  100%{opacity:var(--cn-o,.6);transform:none;filter:drop-shadow(0 0 0 rgba(var(--g),0))}}
@keyframes roRule{0%,100%{border-color:transparent}}
@keyframes roSep{0%{opacity:1;transform:scaleY(0);box-shadow:0 0 8px 1px rgba(var(--g),calc(.6*var(--gk)))}50%{opacity:1;transform:none}100%{opacity:0;transform:none;box-shadow:0 0 8px 1px rgba(var(--g),calc(.6*var(--gk)))}}
@keyframes roSepH{0%{opacity:1;transform:scaleX(0);box-shadow:0 0 8px 1px rgba(var(--g),calc(.6*var(--gk)))}50%{opacity:1;transform:none}100%{opacity:0;transform:none;box-shadow:0 0 8px 1px rgba(var(--g),calc(.6*var(--gk)))}}
@keyframes roPen{0%{opacity:1;transform:scaleX(0);box-shadow:0 0 8px rgba(var(--g),calc(.6*var(--gk)))}49%{opacity:1;transform:none}100%{opacity:0;transform:none;box-shadow:0 0 8px rgba(var(--g),calc(.6*var(--gk)))}}
@keyframes roWipe{from{opacity:0;clip-path:inset(-20px 100% -20px -20px)}to{opacity:1;clip-path:inset(-20px)}}
@keyframes roMark{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes roChip{0%{opacity:0;transform:translateY(6px) scale(.7);border-color:var(--teal)}
  50%{opacity:1;transform:none;border-color:var(--teal);box-shadow:0 0 12px rgba(var(--g),calc(.35*var(--gk)))}100%{box-shadow:0 0 0 rgba(var(--g),0)}}
@keyframes roNum{0%{opacity:0}20%{opacity:1;text-shadow:0 0 8px rgba(var(--g),calc(1*var(--gkt,var(--gk))))}35%{opacity:.25}55%{opacity:1;text-shadow:0 0 8px rgba(var(--g),calc(1*var(--gkt,var(--gk))))}100%{opacity:1;text-shadow:0 0 0 transparent}}
@keyframes roLock{0%{opacity:0;transform:rotate(-135deg) scale(2)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes roPing{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.8)}}
@media (prefers-reduced-motion:reduce){.js.pg .ro.in,.js.pg .ro.in *,.js.pg .ro.in *::before,.js.pg .ro.in *::after,.js.pg .ro.in::before,.js.pg .ro.in::after{animation:none}}