/* Gökyüzü görünümü — tam ekran yaşayan gök, üstünde doğrudan gökyüzüne yazılmış ince tipografi.
   Tüm kurallar .g-gok altında; tek istisna body[data-gorunum="gok"] arka planı. */
body[data-gorunum="gok"] { background-color: #0e1426; }

.g-gok {
  --kenar: clamp(20px, 4.2vw, 64px);
  --sg: 64px;                       /* saatlik şerit sütun genişliği */
  --g-ust: #f8f5ef; --g-ust-soluk: rgba(248,245,239,.74); --g-ust-cizgi: rgba(248,245,239,.2); --g-ust-golge: none;
  --g-alt: #f8f5ef; --g-alt-soluk: rgba(248,245,239,.74); --g-alt-cizgi: rgba(248,245,239,.2); --g-alt-golge: none;
  --gecis: color 1.2s cubic-bezier(.2,.7,.2,1);
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  font-family: "Manrope", system-ui, sans-serif;
  font-feature-settings: "tnum" 0;
}
/* Kabuğun giriş animasyonundaki transform/filter sabit tuvali kaydırmasın: yalnız opaklık */
.sahne.g-gok:not(.cikiyor) { animation: gokGir .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gokGir { from { opacity: 0; } }

.g-gok .gok-tuval {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 100%; height: 100lvh;
  display: block; pointer-events: none;
}
/* Çok hafif film greni: gradyan bantlaşmasını kırar, fotoğraf hissi verir */
.g-gok .gok-tane {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.g-gok .gok-icerik { position: relative; z-index: 1; }
/* Kaydırınca kabuğun altını örten, gökle aynı renkte perde */
.g-gok .gok-tavan {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
  height: calc(var(--kabuk-h) + 36px);
  background-color: var(--g-tavan, #0e1426);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
  opacity: var(--tavan, 0);
  transition: background-color 1.5s cubic-bezier(.2,.7,.2,1);
}
.g-gok .gok-ilk {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--kabuk-h) + 3vh) var(--kenar) max(11.5vh, 64px);
}

/* ---------- Şu an ---------- */
.g-gok .gok-bas { color: var(--g-ust); text-shadow: var(--g-ust-golge); transition: var(--gecis); max-width: 760px; }
.g-gok .gok-bas > * { animation: gokBelir 1s cubic-bezier(.2,.7,.2,1) both; }
.g-gok .gok-bas > :nth-child(2) { animation-delay: .06s; }
.g-gok .gok-bas > :nth-child(3) { animation-delay: .14s; }
.g-gok .gok-bas > :nth-child(4) { animation-delay: .2s; }
.g-gok .gok-bas > :nth-child(5) { animation-delay: .26s; }
.g-gok .gok-bas > :nth-child(6) { animation-delay: .32s; }
@keyframes gokBelir { from { opacity: 0; transform: translateY(10px); } }

.g-gok .gok-yer { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .005em; }
.g-gok .gok-yer .ulke { margin-left: .6em; font-weight: 500; color: var(--g-ust-soluk); transition: var(--gecis); }
.g-gok .gok-yer .ulke:empty { display: none; }

.g-gok .gok-derece {
  display: flex; align-items: flex-start;
  margin: .04em 0 0 -.055em;
  font-size: clamp(120px, 22vw, 300px); font-weight: 200; line-height: .84; letter-spacing: -.065em;
  font-variant-numeric: lining-nums;
}
.g-gok .gok-derece .isaret {
  font-size: .3em; font-weight: 300; line-height: 1; letter-spacing: 0;
  margin: .2em 0 0 .16em;
}
.g-gok .gok-durum {
  margin: .5em 0 0;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.01em;
  font-variation-settings: "opsz" 72;
}
.g-gok .gok-his {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px;
  margin: 10px 0 0; font-size: 15px; font-weight: 500; color: var(--g-ust-soluk); transition: var(--gecis);
  font-variant-numeric: tabular-nums;
}
.g-gok .gok-his .ayrac { width: 1px; height: 13px; background: var(--g-ust-cizgi); }

.g-gok .gok-ayrinti {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px;
  margin: 22px 0 0; padding: 0; list-style: none;
  font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.g-gok .gok-ayrinti li { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; }
.g-gok .gok-ayrinti li:first-child { padding-left: 0; }
.g-gok .gok-ayrinti li + li { border-left: 1px solid var(--g-ust-cizgi); }
.g-gok .gok-ayrinti b { font-weight: 600; }
.g-gok .gok-ayrinti .gs { width: 17px; height: 17px; opacity: .85; }
.g-gok .gun-saat b + .gs { margin-left: 6px; }
.g-gok .ruz-ok {
  width: 15px; height: 15px;
  transform: rotate(var(--aci, 0deg));
  transition: transform 1.4s cubic-bezier(.3,.8,.2,1);
  animation: gokSalin 3.4s ease-in-out infinite alternate;
}
@keyframes gokSalin { from { rotate: -5deg; } to { rotate: 5deg; } }

.g-gok .gok-halk {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 14px 0 0; font-size: 14px; font-weight: 600;
}
.g-gok .gok-halk:empty { display: none; }
.g-gok .gok-halk i { width: 5px; height: 5px; border-radius: 50%; background: var(--k-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-vurgu) 25%, transparent); }
.g-gok .gok-halk span { font-weight: 500; color: var(--g-ust-soluk); }

/* ---------- Alt bölge: saatlik şerit + yedi gün ---------- */
.g-gok .gok-alt {
  margin-top: auto; padding-top: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(32px, 4.5vw, 80px);
  align-items: end;
  color: var(--g-alt); text-shadow: var(--g-alt-golge); transition: var(--gecis);
  animation: gokBelir 1.1s .25s cubic-bezier(.2,.7,.2,1) both;
}
.g-gok .gok-baslik {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 12px;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: 0;
  font-variation-settings: "opsz" 14;
}
.g-gok .gok-baslik::after { content: ""; flex: 1; height: 1px; background: var(--g-alt-cizgi); }

.g-gok .kaydir {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
  outline-offset: 4px;
}
.g-gok .kaydir::-webkit-scrollbar { display: none; }
.g-gok .iz { position: relative; width: calc(var(--n, 24) * var(--sg)); padding-bottom: 50px; }
.g-gok .iz ol {
  display: grid; grid-template-columns: repeat(var(--n, 24), var(--sg));
  margin: 0; padding: 0; list-style: none;
}
.g-gok .saat {
  display: grid; justify-items: center; row-gap: 7px; scroll-snap-align: start;
  font-variant-numeric: tabular-nums;
}
.g-gok .s-saat { font-size: 12.5px; font-weight: 500; color: var(--g-alt-soluk); transition: var(--gecis); }
.g-gok .saat.simdi .s-saat { color: var(--g-alt); font-weight: 700; }
.g-gok .s-simge { width: 26px; height: 26px; }
.g-gok .s-derece { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.g-gok .saat.simdi .s-derece { font-weight: 700; }
.g-gok .s-olasilik { min-height: 13px; font-size: 11px; font-weight: 600; color: var(--g-alt-soluk); }
.g-gok .egri { position: absolute; left: 0; bottom: 8px; width: 100%; height: 40px; overflow: visible; color: var(--g-alt); }
.g-gok .egri-nokta {
  position: absolute; top: calc(100% - 48px + var(--y) * 1px);
  width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--g-alt); box-shadow: 0 0 0 4px var(--g-alt-cizgi);
  animation: gokNabiz 2.6s ease-in-out infinite;
}
@keyframes gokNabiz { 50% { box-shadow: 0 0 0 7px transparent; } }
.g-gok .gun-isaret {
  position: absolute; bottom: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--g-alt-soluk); white-space: nowrap;
}
.g-gok .gun-isaret::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; height: 38px;
  border-left: 1px dashed var(--g-alt-cizgi);
}
.g-gok .gun-isaret .gs { width: 14px; height: 14px; }
.g-gok .gun-isaret b { font-weight: 600; }

.g-gok .gok-hafta ol { margin: 0; padding: 0; list-style: none; }
.g-gok .gok-hafta li {
  display: grid; grid-template-columns: 3.6em 22px 2.4em 2.3em minmax(48px, 1fr) 2.3em; align-items: center; column-gap: 10px;
  height: 34px; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.g-gok .gok-hafta li + li { border-top: 1px solid var(--g-alt-cizgi); }
.g-gok .h-gun { font-weight: 600; }
.g-gok .gok-hafta li.bugun .h-gun { font-weight: 700; }
.g-gok .h-simge { width: 20px; height: 20px; }
.g-gok .h-olasilik { font-size: 11.5px; font-weight: 600; color: var(--g-alt-soluk); }
.g-gok .h-dusuk { text-align: right; color: var(--g-alt-soluk); }
.g-gok .h-yuksek { text-align: right; }
.g-gok .h-cubuk { position: relative; height: 4px; border-radius: 2px; background: var(--g-alt-cizgi); }
.g-gok .h-cubuk i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.g-gok .bugun-nokta {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--g-alt); box-shadow: 0 0 0 2px var(--g-alt-cizgi);
}

/* ---------- Ayrıntılar (aşağıda) ---------- */
.g-gok .gok-ek {
  padding: 4vh var(--kenar) 16vh;
  color: var(--g-alt); text-shadow: var(--g-alt-golge); transition: var(--gecis);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), color 1.2s;
}
.g-gok .gok-ek.gorundu { opacity: 1; transform: none; }
.g-gok .gok-ek dl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px clamp(24px, 3vw, 48px);
  margin: 10px 0 0;
}
.g-gok .gok-ek dl > div { padding-top: 12px; border-top: 1px solid var(--g-alt-cizgi); }
.g-gok .gok-ek dt { font-size: 13px; font-weight: 600; color: var(--g-alt-soluk); }
.g-gok .gok-ek dd {
  margin: 8px 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: 200; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.g-gok .gok-ek .birim { margin-left: .2em; font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--g-alt-soluk); }
.g-gok .gok-ek dd small { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--g-alt-soluk); }
.g-gok .gok-ek .genis { grid-column: 1 / -1; }
.g-gok .gok-ek dd.metin {
  max-width: 64ch; font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 300; line-height: 1.55; letter-spacing: 0;
}
.g-gok .gok-ek dd.metin b { font-weight: 500; font-style: italic; }

/* ---------- İkon animasyonları (ince, sakin) ---------- */
.g-gok .gs { display: block; flex: none; overflow: visible; }
.g-gok .gs-don { transform-origin: 12px 12px; animation: gokDon 48s linear infinite; }
.g-gok .gs-suz { animation: gokSuz 5.5s ease-in-out infinite alternate; }
.g-gok .gs-damla { stroke-dasharray: 2.2 2.4; animation: gokDamla .9s linear infinite; }
.g-gok .gs-cise { animation: gokCise 1.8s ease-in-out infinite; }
.g-gok .gs-kar circle { fill: currentColor; stroke: none; animation: gokKar 2.8s ease-in-out infinite; }
.g-gok .gs-kar circle:nth-child(2) { animation-delay: -.9s; }
.g-gok .gs-kar circle:nth-child(3) { animation-delay: -1.8s; }
.g-gok .gs-simsek { animation: gokCak 5s linear infinite; }
.g-gok .gs-sis { animation: gokSis 6s ease-in-out infinite alternate; }
.g-gok .gs-ay { transform-origin: 12px 12px; animation: gokAy 7s ease-in-out infinite alternate; }
@keyframes gokDon { to { transform: rotate(360deg); } }
@keyframes gokSuz { from { transform: translateX(-.5px); } to { transform: translateX(.7px); } }
@keyframes gokDamla { to { stroke-dashoffset: -9.2; } }
@keyframes gokCise { 50% { opacity: .35; transform: translateY(.8px); } }
@keyframes gokKar { 0% { transform: translate(0, -1px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translate(.6px, 1.4px); opacity: .3; } }
@keyframes gokCak { 0%, 86%, 91%, 100% { opacity: 1; } 88% { opacity: .15; } 93% { opacity: .5; } }
@keyframes gokSis { from { transform: translateX(-1.2px); } to { transform: translateX(1.2px); } }
@keyframes gokAy { from { transform: rotate(-6deg); } to { transform: rotate(4deg); } }

.g-gok.az-hareket .gs *, .g-gok.az-hareket .ruz-ok, .g-gok.az-hareket .egri-nokta { animation: none !important; }

/* ---------- Orta genişlik ---------- */
@media (max-width: 1080px) {
  .g-gok .gok-alt { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
}

/* ---------- Dar ekran (telefon) ---------- */
@media (max-width: 760px) {
  .g-gok { --sg: 58px; }
  .g-gok .gok-ilk { min-height: 0; padding-bottom: 24px; }
  .g-gok .gok-derece { margin-top: .08em; }
  .g-gok .gok-durum { font-size: 23px; }
  .g-gok .gok-his { font-size: 14px; column-gap: 10px; }
  .g-gok .gok-ayrinti { margin-top: 18px; font-size: 13.5px; }
  .g-gok .gok-ayrinti li { padding: 0 12px; }
  .g-gok .gok-alt { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 34px; padding-top: 0; }
  .g-gok .kaydir { margin-right: calc(var(--kenar) * -1); }
  .g-gok .gok-hafta li { height: 42px; font-size: 15px; grid-template-columns: 3.6em 22px 2.4em 2.3em minmax(40px, 1fr) 2.3em; }
  .g-gok .gok-ek { padding-top: 24px; }
  .g-gok .gok-ek dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .g-gok .gok-ek dd.metin { font-size: 16.5px; }
}
@media (max-width: 360px) {
  .g-gok .gok-ayrinti li { padding: 0 9px; }
}