/* canturk.ws — dört gövde, tek dizge
   Yazı tipi: Jost (SIL Open Font License 1.1) — assets/fonts/LICENSE.txt
   Palet: beyaz zemin, lacivert çizgi (#043673), sarı (#FFED00) yalnızca merkezdeki
   nokta. Kırmızı yok. Sayfada etkileşim yoktur: dört gövde döner, o kadar. */

@font-face{font-family:Jost;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Jost;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#FFFFFF;
  --navy:#043673;
  --hair:rgba(4,54,115,.20);
  --hair-strong:rgba(4,54,115,.42);
  --yellow:#FFED00;
  --muted:rgba(4,54,115,.70);   /* beyaz üstünde 4.95:1 — .46 iken 2.59:1 ile AA'yı geçemiyordu */

}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);color:var(--navy);
  font-family:Jost,"Avenir Next","Segoe UI",system-ui,sans-serif;
  font-weight:400;font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--yellow);color:var(--navy)}

/* ---- şeritler ---------------------------------------------------------- */

.topbar,.footbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) clamp(18px,3vw,42px);
  font-size:clamp(10px,.78vw,12px);letter-spacing:.34em;text-transform:uppercase;
}
.footbar{color:var(--muted);justify-content:flex-start}
h1.eyebrow{font-size:inherit;font-weight:400;letter-spacing:.42em}
.langs{display:flex;gap:.9em;letter-spacing:.2em}
.lang{color:var(--muted);text-decoration:none;transition:color .25s}
.lang:hover,.lang:focus-visible{color:var(--navy)}
.lang.is-current{color:var(--navy)}
:where(a):focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

/* ---- dizge ------------------------------------------------------------- */

.stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(18px,3vw,42px)}

.system{
  --s:min(84vmin,760px);
  position:relative;width:var(--s);aspect-ratio:1;
}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* halkalar her durumda aynı: seçim işaretin kendisinde okunur */
.ring{fill:none;stroke:var(--hair);stroke-width:.6}

.core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;line-height:1;
}
/* merkezde iki nokta: biri sarı, biri lacivert */
.dots{display:flex;gap:8px;justify-content:center;margin:0 auto 1em}
.dots i{display:block;width:7px;height:7px;border-radius:50%}
.d-y{background:var(--yellow);box-shadow:inset 0 0 0 .9px rgba(4,54,115,.5)}
.d-n{background:var(--navy)}
.core b{
  font-weight:400;font-size:clamp(19px,2.9vmin,29px);
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
}

.bodies{list-style:none}

/* Bir gövde = tek eleman, tek animasyon. Dış dönüş onu halka üzerinde taşır,
   içteki ters dönüş yazıyı düz tutar; ikisi de AYNI transform'un içinde.
   Önceki sürümde bunlar iç içe iki animasyonlu elemandı ve Firefox her karede
   yeniden çizdiği için işaretler titriyordu. */
.body{
  --r:calc(var(--s) * var(--k));
  position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;
  display:flex;align-items:center;gap:.85em;height:24px;
  white-space:nowrap;cursor:default;
  transform-origin:12px 12px;
  animation:orbit var(--t) linear infinite var(--d);
  will-change:transform;backface-visibility:hidden;
}
.body>b{
  font-weight:400;font-size:clamp(12px,1.66vmin,18px);
  letter-spacing:.15em;text-transform:uppercase;
}
@keyframes orbit{
  from{transform:rotate(0deg)   translateX(var(--r)) rotate(0deg)}
  to  {transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}
}

/* ---- işaretler --------------------------------------------------------- */

.mk{width:24px;height:24px;flex:none;overflow:visible}
.mk-fill{fill:var(--navy)}
.mk-line{fill:none;stroke:var(--navy);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
/* katlanmış broşür tek çizgiden ibaret, o yüzden daha kalın taşınır */
.mk-fold{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Uçbirim imleci sert yanıp söner. visibility kullanılıyor, opacity değil:
   opacity bileşim katmanı doğuruyor ve hareket eden bir öğenin içinde her
   yanıp sönmede Firefox işareti yeniden rasterize edip titretiyordu. */
.mk-blink{animation:blink 1.15s step-end infinite}
@keyframes blink{0%,54%{visibility:visible}55%,100%{visibility:hidden}}

/* ---- dar ekran --------------------------------------------------------- */

.roster{display:none;list-style:none}

@media (max-width:780px),(max-height:520px){
  /* Dar ekranda sayfa yüksekliği içeriğe göre büyür ve normal akar.
     Önceki hâlde body 100% yükseklikte sabitti ve sahne flex:1 + min-height:0 ile
     içeriğinden kısa kalıyordu: içerik kutusundan taşıp üstteki başlığın ve
     alttaki şeridin üzerine biniyordu. Telefon tarayıcı çubukları yüksekliği
     kısalttığı için tam orada görünür oluyordu. */
  html,body{height:auto}
  body{overflow:auto;min-height:100dvh}
  .stage{
    flex:0 0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:clamp(22px,6vw,40px);
    padding:clamp(10px,4vw,26px) clamp(20px,6vw,32px) clamp(18px,6vw,28px);
  }
  .system{--s:min(72vw,340px)}
  .body>b{display:none}
  .body{gap:0}
  /* Dar ekranda en içteki yörünge merkezdeki yazının içinden geçiyordu.
     Soyad zaten üst şeritte ve her satırda var; merkezde iki nokta yeter. */
  .core b{display:none}
  .dots{margin-bottom:0}

  .roster{display:grid;width:100%;max-width:420px}
  .roster li{
    display:flex;align-items:center;gap:14px;
    padding:15px 2px;border-top:1px solid var(--hair);
  }
  .roster li:last-child{border-bottom:1px solid var(--hair)}
  .roster b{font-weight:400;font-size:clamp(15px,4.4vw,19px);
    letter-spacing:.13em;text-transform:uppercase}
}

@media (prefers-reduced-motion:reduce){
  .body,.mk-blink{animation:none}
  .body{will-change:auto}
  /* hareket kapalıyken gövdeler kendi başlangıç açılarında durur */
  .body{transform:rotate(var(--r0)) translateX(var(--r)) rotate(calc(-1 * var(--r0)))}
  *{transition-duration:.001ms !important}
}

/* ---- Humus ve Dali ------------------------------------------------------ */
:root{--patch:rgba(4,54,115,.17);--patch2:rgba(4,54,115,.09)}
.pet{overflow:visible;display:block}
.p-ln{fill:none;stroke:var(--navy);stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.p-thin{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-whisk{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.p-fill{fill:var(--navy)}
.p-patch{fill:var(--patch)}
.p-patch2{fill:var(--patch2)}
.p-eye{fill:var(--yellow);stroke:var(--navy);stroke-width:2}
.p-white{fill:#fff}
.p-tailcat{transform-box:fill-box;transform-origin:12% 88%;animation:sway 4.6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}
.p-taildog{transform-box:fill-box;transform-origin:8% 92%;animation:wag 1.05s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-13deg)}to{transform:rotate(15deg)}}
.p-earl{transform-box:fill-box;transform-origin:50% 100%;animation:tw 7s ease-in-out infinite}
.p-earr{transform-box:fill-box;transform-origin:50% 100%;animation:tw 7s ease-in-out infinite .9s}
@keyframes tw{0%,86%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(4deg)}100%{transform:rotate(0)}}
.p-flopl{transform-box:fill-box;transform-origin:60% 8%;animation:flop 3.4s ease-in-out infinite}
.p-flopr{transform-box:fill-box;transform-origin:40% 8%;animation:flop 3.4s ease-in-out infinite .4s}
@keyframes flop{0%,72%{transform:rotate(0)}80%{transform:rotate(5deg)}88%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.p-blink,.p-blinkd{transform-box:fill-box;transform-origin:50% 50%;animation:blink 6.2s infinite}
.p-blinkd{animation-duration:5.1s}
.p-b2{animation-delay:.06s}
@keyframes blink{0%,93%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
.p-breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018,1.012)}}
@media (prefers-reduced-motion:reduce){
  .p-tailcat,.p-taildog,.p-earl,.p-earr,.p-flopl,.p-flopr,
  .p-blink,.p-blinkd,.p-breathe{animation:none}
}


.pets-core{display:flex;justify-content:center;gap:26px;margin-top:16px}
.pet-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.pets-core .pet{width:54px;height:66px}
.pet-item i{font-style:normal;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted)}
/* Dar ekranda merkeze sığmıyorlar: halkanın dışına taşıyor ve ikinci yörünge
   isimlerin içinden geçiyordu. Orada listenin altına iniyorlar. */
.pets-mobile{display:none}
@media (max-width:780px),(max-height:520px){
  .pets-core{display:none}
  .pets-mobile{display:flex;justify-content:center;gap:30px;padding-top:6px}
  .pets-mobile .pet{width:58px;height:71px}
}
/* Dar ekranda merkeze sığmıyorlar: halkanın dışına taşıyor ve ikinci yörünge
   isimlerin içinden geçiyordu. Orada listenin altına iniyorlar. */