/* ==========================================================================
   kiraz.css — the "cherry on top" spectacles (refine round 1), each in its
   own banner-marked block so any one can be removed independently.
   Companion JS: js/kiraz.js (thread, numeral roll, console signature) and
   js/surface.js (Mürekkep Kapma). Named kiraz, not cherries — ad blockers
   block resources literally named cherries.*.
   ========================================================================== */

/* NOTE: the .portals / .portal rules in css/main.css are dormant as of
   2026-08-03 — the Kesişim Haritası and Nehir portals were withdrawn from
   index.html. Kept intact so restoring the portals needs no CSS work. */

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 1 · KIRMIZI İPLİK — the red thread that climbs the left edge as
   you scroll; one node per section, lit once the reader has passed it.
   DOM is built by js/kiraz.js.
   ═══════════════════════════════════════════════════════════════════════ */
.iplik{
  position:fixed; left:18px; top:0; bottom:0; z-index:8;
  pointer-events:none;
}
.iplik-track{
  position:absolute; left:0; top:86px; bottom:30px; width:1px;
  background:rgba(250,247,242,.06);
}
.iplik-fill{
  position:absolute; left:0; top:0; width:1px; height:0%;
  background:linear-gradient(
    to bottom,
    rgba(163,22,33,.0),
    rgba(163,22,33,.45) 26%,
    rgba(194,36,48,.85)
  );
}
/* the living head of the thread — same idea as the river's glowing front */
.iplik-tip{
  position:absolute; left:.5px; top:0%;
  width:5px; height:5px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--red-hi);
  box-shadow:0 0 12px rgba(194,36,48,.85);
  opacity:0;
  transition:opacity .4s ease;
}
.iplik.on .iplik-tip{opacity:1}

/* section nodes */
.iplik-node{
  position:absolute; left:.5px;
  width:15px; height:15px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:none; border:0; padding:0;
  pointer-events:auto; cursor:pointer;
}
.iplik-node::before{
  content:"";
  position:absolute; inset:4px; border-radius:50%;
  background:var(--black);
  border:1px solid rgba(250,247,242,.22);
  transition:background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.iplik-node.lit::before{
  background:var(--red-hi);
  border-color:var(--red-hi);
  box-shadow:0 0 9px rgba(194,36,48,.55);
}
/* quiet label on hover */
.iplik-node::after{
  content:attr(data-label);
  position:absolute; left:19px; top:50%;
  transform:translateY(-50%) translateX(-4px);
  font-family:'Space Grotesk', sans-serif;
  font-size:9px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-dim); white-space:nowrap;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.iplik-node:hover::after,
.iplik-node:focus-visible::after{opacity:1; transform:translateY(-50%) translateX(0)}
.iplik-node:focus-visible{outline:1px solid rgba(194,36,48,.55); outline-offset:3px}

@media (max-width:760px){
  .iplik{left:9px}
  .iplik-track{top:76px; bottom:22px}
}
/* touch: decorative only — tiny targets would fight the thumb */
@media (hover:none){
  .iplik-node{pointer-events:none}
}
@media (prefers-reduced-motion: reduce){
  .iplik-tip{box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 4 · SON NOKTA — "İnsan için teknoloji" fades in as before; its
   period arrives a beat later as the site's red dot easing into place,
   with one soft glow that settles. Stays red: the hero's signature.
   ═══════════════════════════════════════════════════════════════════════ */
.nokta-hold{white-space:nowrap}
.son-nokta{
  display:inline-block;
  color:var(--red-hi);
  opacity:0;
}
.hero-statement.in .son-nokta{
  animation:
    nokta-in .75s cubic-bezier(.34,1.56,.64,1) 1.35s both,
    nokta-glow 1.8s ease 1.35s 1 both;
}
@keyframes nokta-in{
  0%{opacity:0; transform:translate(12px,-26px) scale(.3)}
  55%{opacity:1; transform:translate(0,3px) scale(1.18)}
  100%{opacity:1; transform:none}
}
@keyframes nokta-glow{
  0%,30%{text-shadow:0 0 0 rgba(194,36,48,0)}
  55%{text-shadow:0 0 22px rgba(194,36,48,.95)}
  100%{text-shadow:0 0 0 rgba(194,36,48,0)}
}
@media (prefers-reduced-motion: reduce){
  .son-nokta{opacity:1; animation:none !important}
  .hero-statement.in .son-nokta{animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 5 · 20'NİN HAFIZASI — hovering the numeral rolls 2006 → today,
   then settles back to 20. JS drives the digits (js/kiraz.js); this block
   only handles the width dance: four digits need a smaller size than two.
   ═══════════════════════════════════════════════════════════════════════ */
.board .big20{
  transition:font-size .38s cubic-bezier(.22,.8,.24,1);
}
.board .t-num .tile-inner sup{
  transition:opacity .25s ease;
}
/* "2006 yıl" would read wrong — the unit steps aside while years roll */
.board .t-num.is-rolling sup{opacity:0}
.board .t-num.is-rolling .big20{
  font-size:clamp(4.2rem, 8.4vw, 6.8rem);
}
@supports (container-type: inline-size){
  .board .t-num.is-rolling .big20{font-size:clamp(2.4rem, 35cqi, 6.8rem)}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 6 · ÜRETEN İMLECİ — a thin red editor caret blinks after
   "Konuşan değil, Üreten." — still producing, right now.
   ═══════════════════════════════════════════════════════════════════════ */
.ureten-imlec{
  display:inline-block;
  width:.13em; height:.82em;
  margin-left:.16em;
  vertical-align:-.08em;
  background:var(--red-hi);
  animation:imlec-blink 1.12s steps(1, end) infinite;
}
@keyframes imlec-blink{
  0%, 54%{opacity:1}
  55%, 100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .ureten-imlec{animation:none !important; opacity:.7}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 7 · KADANS — on hover the workplace emblems colorize one by one,
   left to right, a small chronology wave instead of a single switch.
   Delays live only under :hover so the fade back out stays uniform.
   ═══════════════════════════════════════════════════════════════════════ */
.board .t-work .job img{transition-delay:0s}
.board .t-work .tile-inner:hover .job:nth-child(1) img{transition-delay:0s}
.board .t-work .tile-inner:hover .job:nth-child(2) img{transition-delay:.09s}
.board .t-work .tile-inner:hover .job:nth-child(3) img{transition-delay:.18s}
.board .t-work .tile-inner:hover .job:nth-child(4) img{transition-delay:.27s}
.board .t-work .tile-inner:hover .job:nth-child(5) img{transition-delay:.36s}
.board .t-work .tile-inner:hover .job:nth-child(6) img{transition-delay:.45s}

/* ═══════════════════════════════════════════════════════════════════════
   CHERRY 8 · YARIM KALANIN AKIŞI — the unfinished PhD's dashed red
   connector drifts slowly upward while the education tile is hovered.
   A border can't animate, so the dashes are rebuilt as a repeating
   gradient on ::after in exactly the border's position.
   ═══════════════════════════════════════════════════════════════════════ */
.board .edu-incomplete{border-left-color:transparent}
.board .edu-incomplete::before{z-index:1}
.board .edu-incomplete::after{
  content:"";
  position:absolute; left:-1px; top:0; bottom:0; width:1px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(194,36,48,.4) 0 4px,
    transparent 4px 9px
  );
  background-size:1px 9px;
}
.board .t-edu .tile-inner:hover .edu-incomplete::after{
  animation:yarim-akis 1.5s linear infinite;
}
@keyframes yarim-akis{
  from{background-position:0 0}
  to{background-position:0 -9px}
}
@media (prefers-reduced-motion: reduce){
  .board .t-edu .tile-inner:hover .edu-incomplete::after{animation:none !important}
}