/* =====================================================================
   LikedWin — /buyuk-goc sayfası (gc-*)
   ---------------------------------------------------------------------
   KURAL: bu dosyada GRADYAN YOK (linear/radial/conic, gradyan metin,
   renkli ışık halesi). Tüm yüzeyler düz renk; tema değişkenleri aşağıda.
   marketing.css'ten yalnızca [data-reveal] animasyonu kullanılır —
   gradyanlı mk-btn / mk-hero / mk-cta BİLEREK kullanılmıyor.
   ===================================================================== */

:root {
    --gc-sky:      #e6eef9;   /* hero gökyüzü */
    --gc-cloud:    rgba(255, 255, 255, .78);
    --gc-sun:      #fbeabf;
    --gc-mnt-3:    #d4dff1;   /* uzak şehir (plazalar, kuleler) */
    --gc-mnt-2:    #c3d2ec;   /* yakın şehir (apartman, ev) */
    --gc-win-3:    #e4ebf7;   /* gündüz pencere: binadan açık, cam yansıması */
    --gc-win-2:    #d9e3f4;
    --gc-roof:     #b2c3e3;   /* çatı, korkuluk, kapı */
    --gc-lit:      var(--gc-win-2);   /* gündüz yanan pencere yok: sönükle aynı */
    --gc-lit-2:    var(--gc-win-2);
    --gc-mnt-1:    var(--bg); /* ön tepe = sayfa zemini, bir sonraki banda kesintisiz akar */
    --gc-bird:     #2f3a57;
    --gc-star:     transparent;
    --gc-shadow:   rgba(15, 22, 51, .16);   /* karakter ayak gölgesi (düz elips) */

    --gc-btn:      #15192b;   /* ana koyu buton (ikas'taki siyah buton karşılığı) */
    --gc-btn-fg:   #ffffff;
    --gc-btn-h:    #262c45;

    --gc-violet-bg: #f1ecfe;  --gc-violet-fg: #6d3ce0;
    --gc-card:     0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(15, 22, 51, .28);
    --gc-card-h:   0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -22px rgba(15, 22, 51, .38);
    --gc-radius:   22px;
    --gc-spring:   cubic-bezier(.2, .8, .25, 1);
}

:root[data-theme="dark"] {
    --gc-sky:      #0e1420;
    --gc-cloud:    rgba(255, 255, 255, .045);
    --gc-sun:      #e9e3cf;   /* gece: ay */
    --gc-mnt-3:    #151d2b;
    --gc-mnt-2:    #192232;
    --gc-win-3:    #1c2436;
    --gc-win-2:    #212b40;
    --gc-roof:     #121927;
    --gc-lit:      #ffc85a;   /* gece: sıcak oda ışığı */
    --gc-lit-2:    #ffe3a3;   /* daha açık, beyaza yakın ampul */
    --gc-bird:     #aeb9d6;
    --gc-star:     #dfe6ff;
    --gc-shadow:   rgba(0, 0, 0, .45);
    --gc-btn:      #f5f7f8;
    --gc-btn-fg:   #111315;
    --gc-btn-h:    #ffffff;
    --gc-violet-bg: rgba(155, 92, 255, .16);  --gc-violet-fg: #b89bff;
    --gc-card:     0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
    --gc-card-h:   0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -18px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --gc-sky:      #0e1420;
        --gc-cloud:    rgba(255, 255, 255, .045);
        --gc-sun:      #e9e3cf;
        --gc-mnt-3:    #151d2b;
        --gc-mnt-2:    #192232;
        --gc-win-3:    #1c2436;
        --gc-win-2:    #212b40;
        --gc-roof:     #121927;
        --gc-lit:      #ffc85a;   /* gece: sıcak oda ışığı */
        --gc-lit-2:    #ffe3a3;   /* daha açık, beyaza yakın ampul */
        --gc-bird:     #aeb9d6;
        --gc-star:     #dfe6ff;
        --gc-shadow:   rgba(0, 0, 0, .45);
        --gc-btn:      #f5f7f8;
        --gc-btn-fg:   #111315;
        --gc-btn-h:    #ffffff;
        --gc-violet-bg: rgba(155, 92, 255, .16);  --gc-violet-fg: #b89bff;
        --gc-card:     0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
        --gc-card-h:   0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -18px rgba(0, 0, 0, .8);
    }
}

.gc-page { display: block; overflow-x: clip; }

/* =====================================================================
   0) ORTAK — bölüm, başlık, buton
   ===================================================================== */
.gc-sec { position: relative; padding: clamp(64px, 8vw, 120px) 0; background: var(--bg); }
.gc-sec--soft { background: var(--bg-soft); }

.gc-head { max-width: 720px; margin: 0 auto clamp(36px, 4.5vw, 60px); text-align: center; }
.gc-head--split {
    max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; text-align: left;
}
.gc-head--split > div:first-child { max-width: 640px; }

.gc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px; margin-bottom: 18px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text);
}
.gc-eyebrow i {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand); font-size: 10.5px;
}
.gc-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(28px, 3.8vw, 48px); font-weight: 800; line-height: 1.1;
    letter-spacing: -.03em; color: var(--mk-ink, var(--ink)); margin: 0 0 14px; text-wrap: balance;
}
.gc-sub {
    margin: 0 auto; max-width: 620px; text-wrap: pretty;
    font-size: clamp(15px, 1.55vw, 17px); line-height: 1.7; font-weight: 500; color: var(--muted);
}
.gc-head--split .gc-sub { margin: 0; }

.gc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent;
    font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: transform .25s var(--gc-spring), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, opacity .62s var(--gc-spring);
}
.gc-btn i { font-size: .9em; transition: transform .25s var(--gc-spring); }
.gc-btn:hover i.fa-arrow-right { transform: translateX(3px); }
.gc-btn:hover { transform: translateY(-2px); }
.gc-btn:active { transform: translateY(0) scale(.98); }
.gc-btn:focus-visible { outline: 3px solid var(--brand-line-2); outline-offset: 3px; }

.gc-btn--dark  { background: var(--gc-btn); color: var(--gc-btn-fg); box-shadow: 0 10px 24px -12px rgba(15, 20, 40, .55); }
.gc-btn--dark:hover  { background: var(--gc-btn-h); color: var(--gc-btn-fg); }
/* Soldan sağa geçen parıltı (anasayfadaki CTA ile aynı ritim). Gradyan yerine
   düz yarı saydam bant + bulanıklık: kenarlar yine yumuşak görünür. */
.gc-btn--shine { position: relative; overflow: hidden; isolation: isolate; --gc-shine: rgba(255, 255, 255, .30); }
.gc-btn--shine::after {
    content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 34%; z-index: -1;
    background: var(--gc-shine); filter: blur(7px); pointer-events: none;
    transform: translateX(-180%) skewX(-18deg);
    animation: gcShine 3.6s cubic-bezier(.35, 0, .25, 1) infinite;
}
@keyframes gcShine {
    0%        { transform: translateX(-180%) skewX(-18deg); }
    45%, 100% { transform: translateX(380%)  skewX(-18deg); }
}
:root[data-theme="dark"] .gc-btn--shine { --gc-shine: rgba(37, 68, 216, .22); }   /* koyu temada buton açık renk */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-btn--shine { --gc-shine: rgba(37, 68, 216, .22); }
}
.gc-btn--light { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.gc-btn--light:hover { color: var(--brand); border-color: var(--brand-line-2); }
.gc-btn--brand { background: var(--cta-bg); color: var(--cta-fg); box-shadow: var(--cta-shadow); }
.gc-btn--brand:hover { background: var(--cta-bg-hover); color: var(--cta-fg); }
.gc-btn--line  { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.gc-btn--line:hover { border-color: var(--brand); color: var(--brand); }
.gc-btn--block { width: 100%; }

.gc-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(34px, 4vw, 52px); }

/* =====================================================================
   1) KUŞ — iki kanat ayrı çırpar
   ===================================================================== */
.gc-bird { position: absolute; display: block; width: 40px; line-height: 0; animation: gcBob 3.4s ease-in-out infinite; animation-delay: var(--dl, 0ms); }
.gc-bird svg { display: block; width: 100%; height: auto; overflow: visible; }
.gc-bird__w {
    fill: none; stroke: var(--gc-bird); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    transform-origin: 20px 12px; animation: .62s ease-in-out infinite alternate;
    animation-delay: var(--dl, 0ms);
}
.gc-bird__w--l { animation-name: gcFlapL; }
.gc-bird__w--r { animation-name: gcFlapR; }
.gc-bird__b { fill: var(--gc-bird); }
@keyframes gcFlapL { from { transform: rotate(-26deg); } to { transform: rotate(16deg); } }
@keyframes gcFlapR { from { transform: rotate(26deg); }  to { transform: rotate(-16deg); } }
@keyframes gcBob   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* =====================================================================
   2) HERO — gökyüzü
   ===================================================================== */
.gc-hero {
    --g:  clamp(96px, 11vw, 160px);             /* ön tepe (zemin) bandı yüksekliği */
    --ph: clamp(140px, 15vw, 220px);            /* ön şeritteki karakter boyu */
    position: relative; overflow: hidden; isolation: isolate;
    min-height: clamp(560px, 78vh, 820px);      /* 1440×900'de ayaklar ilk ekranda kalsın */
    display: grid; align-items: center;
    padding: clamp(52px, 6vw, 90px) 0 calc(var(--ph) + var(--g) * .12 + 34px);
    background: var(--gc-sky);
}
.gc-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.gc-sun {
    position: absolute; top: 15%; right: 13%;
    width: clamp(70px, 8vw, 118px); aspect-ratio: 1; border-radius: 50%;
    background: var(--gc-sun);
    animation: gcSunIn 1.6s var(--gc-spring) both .2s;
}
@keyframes gcSunIn { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }

.gc-stars i {
    position: absolute; left: var(--sx); top: var(--sy);
    width: 2px; height: 2px; border-radius: 50%; background: var(--gc-star);
    animation: gcTwinkle 3.6s ease-in-out infinite; animation-delay: var(--sd);
}
@keyframes gcTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Yıldızlar, ayın çevresindekileri gizleyen JS (initMoonClear) bitene kadar görünmez;
   yoksa sayfa açılırken ayın yanındakiler bir an görünüp kayboluyordu. */
.gc-sky:not(.is-stars-ready) .gc-stars { visibility: hidden; }

.gc-cloud {
    position: absolute; height: 44px; border-radius: 999px; background: var(--gc-cloud);
    animation: gcDrift linear infinite alternate;
}
.gc-cloud::before, .gc-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.gc-cloud--1 { width: 210px; top: 24%; left: 6%;  animation-duration: 38s; }
.gc-cloud--1::before { width: 90px; height: 90px; left: 36px; top: -46px; }
.gc-cloud--1::after  { width: 64px; height: 64px; left: 108px; top: -30px; }
.gc-cloud--2 { width: 160px; top: 46%; right: 5%; animation-duration: 30s; animation-direction: alternate-reverse; }
.gc-cloud--2::before { width: 70px; height: 70px; left: 30px; top: -36px; }
.gc-cloud--2::after  { width: 52px; height: 52px; left: 86px; top: -24px; }
.gc-cloud--3 { width: 120px; top: 12%; left: 48%; height: 32px; animation-duration: 44s; opacity: .8; }
.gc-cloud--3::before { width: 52px; height: 52px; left: 24px; top: -26px; }
.gc-cloud--3::after  { width: 40px; height: 40px; left: 62px; top: -18px; }
@keyframes gcDrift { from { transform: translateX(-30px); } to { transform: translateX(46px); } }

.gc-mnt { position: absolute; left: -2%; width: 104%; max-width: none; bottom: 0; display: block; }   /* site.css'teki svg{max-width:100%} %104'ü kırpıp sağda boşluk bırakıyordu */
.gc-mnt--3 { height: clamp(200px, 26vw, 370px); }   /* uzak şehir: tepenin üstünde net bir silüet kalsın */
.gc-mnt--2 { height: clamp(160px, 20vw, 290px); }

/* ---------------------------------------------------------------------
   Şehir silüeti (buyuk-goc.php → gcCity). Gündüz sakin: pencereler binadan
   bir ton açık cam. Gece: bazı pencereler yanar, bazıları kendi ritminde
   açılıp kapanır, birkaç evde TV titrer, antenlerde kırmızı ikaz lambası.
   Animasyonların hepsi yalnızca koyu temada çalışır.
   --------------------------------------------------------------------- */
.gc-city--far  { --wb: var(--gc-mnt-3); --wo: var(--gc-win-3); }
.gc-city--near { --wb: var(--gc-mnt-2); --wo: var(--gc-win-2); }
.gc-city .b { fill: var(--wb); }
.gc-city .r { fill: var(--gc-roof); }
.gc-city .d { fill: var(--gc-roof); }
.gc-city .w { fill: var(--wo); }
.gc-city .a { fill: var(--wb); }
.gc-city .w, .gc-city .a { transition: fill .6s ease; }

:root[data-theme="dark"] .gc-city .w.l  { fill: var(--gc-lit); }
:root[data-theme="dark"] .gc-city .w.l2 { fill: var(--gc-lit-2); }
:root[data-theme="dark"] .gc-city .w.t  { animation: gcWin var(--d) linear infinite; animation-delay: var(--dl); }
:root[data-theme="dark"] .gc-city .w.f  { animation: gcTv var(--d) steps(1, end) infinite; animation-delay: var(--dl); }
:root[data-theme="dark"] .gc-city .a    { fill: #ff5a5a; animation: gcBeacon var(--d) ease-in-out infinite; animation-delay: var(--dl); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-city .w.l  { fill: var(--gc-lit); }
    :root:not([data-theme]) .gc-city .w.l2 { fill: var(--gc-lit-2); }
    :root:not([data-theme]) .gc-city .w.t  { animation: gcWin var(--d) linear infinite; animation-delay: var(--dl); }
    :root:not([data-theme]) .gc-city .w.f  { animation: gcTv var(--d) steps(1, end) infinite; animation-delay: var(--dl); }
    :root:not([data-theme]) .gc-city .a    { fill: #ff5a5a; animation: gcBeacon var(--d) ease-in-out infinite; animation-delay: var(--dl); }
}
/* Işık düğmesi: uzun süre sönük, anahtar çevrilince hızla yanar, bir süre açık kalır */
@keyframes gcWin {
    0%, 34%   { fill: var(--wo); }
    36%, 78%  { fill: var(--gc-lit); }
    80%, 100% { fill: var(--wo); }
}
/* TV: soğuk mavi tonlar arasında düzensiz titreme */
@keyframes gcTv {
    0%   { fill: #7f9cff; }  18% { fill: #5d7de6; }  31% { fill: #a9bcff; }
    47%  { fill: #6b8cf5; }  63% { fill: #8faaff; }  79% { fill: #5573d9; }
}
@keyframes gcBeacon { 0%, 100% { opacity: .25; } 45%, 55% { opacity: 1; } }
.gc-mnt--1 { height: var(--g, 130px); bottom: -1px; }
.gc-mnt--1 path { fill: var(--gc-mnt-1); }

/* ---------------------------------------------------------------------
   Göç eden karakterler — soldan sağa yürüyen kalabalık
   Görsel durağan; yürüme hissi: adım zıplaması (translate) + gövde
   salınımı (rotate) + basışta yayılan gölge. Bağımsız transform
   özellikleri (translate/rotate/scale) sayesinde üçü birbirini ezmez.
   --------------------------------------------------------------------- */
.gc-walk { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
.gc-walk--back  { bottom: calc(var(--g) * .56); --h: calc(var(--ph) * .5);  --bob: 1px; }   /* tepenin ARKASINDA, ayakları sırtta kaybolur */
.gc-walk--mid   { bottom: calc(var(--g) * .36); --h: calc(var(--ph) * .72); --bob: 1.5px; }
.gc-walk--front { bottom: calc(var(--g) * .10); --h: var(--ph);             --bob: 2px; }

.gc-walker {
    position: absolute; left: 0; bottom: 0;
    animation: gcWalk var(--dur) linear infinite; animation-delay: var(--delay);
    will-change: transform;
}
@keyframes gcWalk { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }

.gc-walker__body {
    position: relative; z-index: 1; transform-origin: 50% 100%;
    animation: gcStepY var(--step) ease-in-out infinite alternate, gcSwayR calc(var(--step) * 2) ease-in-out infinite alternate;
    animation-delay: var(--sd), var(--sd);
}
.gc-walker__body img { display: block; height: var(--h); width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
/* Yürüme kareleri: tek görselde yan yana n kare, steps() ile sırayla.
   Bir karenin süresi --step; gövde zıplaması da aynı --step ile döndüğü
   için "geçiş" kareleri (2 ve 4) gövdenin en yüksek anına denk gelir. */
.gc-sprite {
    display: block; height: var(--h); width: calc(var(--h) * var(--fw) / var(--fh));
    background-image: var(--spr);                /* masaüstü: 520px şerit */
    background-repeat: no-repeat; background-position: 0 0;
}
@media (max-width: 720px) {
    .gc-sprite { background-image: var(--spr-m, var(--spr)); }   /* telefon: 360px kopya (~%45 hafif) */
}
.gc-sprite--4 { background-size: 400% 100%; animation: gcFrames4 calc(var(--step) * 4) steps(4) infinite; animation-delay: var(--sd); }
@keyframes gcFrames4 { from { background-position: 0 0; } to { background-position: 133.3333% 0; } }
/* 8 kare: aynı iki adım süresine iki kat kare → her kare --step/2, hareket akıcı.
   Zıplama yine --step ile döner: 1. kare (basış) alçak, 3. kare (geçiş) yüksek. */
.gc-sprite--8 { background-size: 800% 100%; animation: gcFrames8 calc(var(--step) * 4) steps(8) infinite; animation-delay: var(--sd); }
@keyframes gcFrames8 { from { background-position: 0 0; } to { background-position: 114.2857% 0; } }

/* Bacak düzeneği: aynı görselin üç kırpımı. Adım ritminde (bob ile aynı
   --step, aynı yön) bacaklar birbirine yaklaşıp açılır → makas yürüyüşü.
   Yaklaşırken gövde en yüksekte, açılınca yere basar. */
.gc-rig { position: relative; display: block; }
.gc-rig__p { position: absolute; left: 0; top: 0; }
.gc-rig__p--back  { z-index: 1; animation: gcLegB var(--step) ease-in-out infinite alternate; animation-delay: var(--sd); }
.gc-rig__p--front { z-index: 2; animation: gcLegF var(--step) ease-in-out infinite alternate; animation-delay: var(--sd); }
.gc-rig__p--torso { z-index: 3; }
@keyframes gcLegB { from { rotate: 0deg; } to { rotate: -8deg; } }
@keyframes gcLegF { from { rotate: 0deg; } to { rotate: 8deg; } }
@keyframes gcStepY { from { translate: 0 0; } to { translate: 0 calc(var(--bob) * -1); } }
@keyframes gcSwayR { from { rotate: -.7deg; } to { rotate: .7deg; } }   /* büyük salınım ayağı gölgeden kaldırıyordu */

.gc-walker__shadow {
    position: absolute; left: 14%; right: 14%; bottom: calc(var(--h) * -.006); height: calc(var(--h) * .04);   /* elips tabanın tam altında, ayaklardan kopmasın */
    border-radius: 50%; background: var(--gc-shadow);
    animation: gcShadow var(--step) ease-in-out infinite alternate; animation-delay: var(--sd);
}
@keyframes gcShadow { from { scale: 1; opacity: 1; } to { scale: .82 .9; opacity: .6; } }

/* Yol tabelaları */
.gc-sign {
    position: absolute; bottom: calc(var(--g) * .3); z-index: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    width: max-content; pointer-events: none;
}
.gc-sign--old { left: clamp(10px, 4vw, 70px); }
.gc-sign--new { right: clamp(10px, 4vw, 70px); align-items: flex-end; }
.gc-sign__post {
    position: absolute; top: 4px; bottom: calc(var(--g) * -.12); left: 18px; width: 7px;
    border-radius: 3px; background: var(--gc-mnt-3); z-index: -1;
}
.gc-sign--new .gc-sign__post { left: auto; right: 18px; background: var(--brand-line-2); }
.gc-sign__plate {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px 7px 20px; font-size: clamp(11px, 1vw, 13px); font-weight: 800; letter-spacing: .01em; white-space: nowrap;
    rotate: var(--r, 0deg);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);   /* sola bakan ok */
}
.gc-sign--old .gc-sign__plate { background: var(--gc-mnt-2); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* LikedWin tabelası — uzun direk, katmanlı ok levha + alt levha, hafif sallanma.
   Düz renk: levhanın "kalınlığı" altına kaydırılmış koyu kopyasıyla verilir. */
.gc-sign--new {
    --sg-bg:   #2544d8;   /* levha (iki temada da doygun marka mavisi, üstünde beyaz yazı) */
    --sg-edge: #16205a;   /* levha kalınlığı */
    --sg-post: #1c2a6b;   /* direk */
    height: calc(var(--ph) * 1.22);
    align-items: flex-end;
    pointer-events: auto; cursor: pointer; text-decoration: none; color: inherit;   /* tıklanabilir (gökyüzü katmanı pointer-events:none) */
}
.gc-sign--new .gc-sign__board { transition: translate .25s var(--gc-spring); }
.gc-sign--new:hover .gc-sign__board,
.gc-sign--new:focus-visible .gc-sign__board { translate: 0 -3px; }
.gc-sign--new:hover .gc-sign__face > i { translate: 3px 0; }
.gc-sign__face > i { transition: translate .25s var(--gc-spring); }
.gc-sign--new:focus-visible { outline: none; }
.gc-sign--new:focus-visible .gc-sign__board { outline: 3px solid var(--brand-line-2); outline-offset: 4px; border-radius: 14px; }   /* yüzeyin clip-path'i çerçeveyi kırpardı */
:root[data-theme="dark"] .gc-sign--new { --sg-bg: #3452ec; --sg-edge: #16205a; --sg-post: #2b3a82; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-sign--new { --sg-bg: #3452ec; --sg-edge: #16205a; --sg-post: #2b3a82; }
}
.gc-sign--new .gc-sign__post {
    left: auto; right: 22px; top: 8px; width: 10px; border-radius: 5px; background: var(--sg-post);
}
.gc-sign--new .gc-sign__post::before {       /* direk başlığı */
    content: ""; position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; margin-left: -8px;
    border-radius: 50%; background: var(--sg-post);
}
.gc-sign__swing {
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    transform-origin: calc(100% - 27px) 0;
    animation: gcSignSwing 5s ease-in-out infinite;
}
@keyframes gcSignSwing { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }

.gc-sign__board { position: relative; display: block; }
.gc-sign__board::before {                     /* levhanın kalınlığı */
    content: ""; position: absolute; inset: 0; translate: 0 5px; background: var(--sg-edge);
    border-radius: 14px 0 0 14px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.gc-sign__face {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 11px 38px 11px 11px; background: var(--sg-bg); color: #fff;
    border-radius: 14px 0 0 14px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.gc-sign__logo {
    flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; position: relative;
}
.gc-sign__logo::before {                      /* logo ikonu marka renginde (maske) */
    content: ""; position: absolute; inset: 7px; background: var(--sg-bg);
    -webkit-mask: url('/assets/img/likedwin-logo-icon.svg') center / contain no-repeat;
            mask: url('/assets/img/likedwin-logo-icon.svg') center / contain no-repeat;
}
.gc-sign__txt { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.gc-sign__txt b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(15px, 1.35vw, 19px); font-weight: 800; letter-spacing: -.02em; }
.gc-sign__txt small { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
.gc-sign__face > i { font-size: 13px; opacity: .9; }

.gc-sign__subs { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-right: 16px; }
.gc-sign__sub {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px 6px 9px; border-radius: 8px;
    background: var(--surface); color: var(--sg-bg); border: 1.5px solid var(--sg-bg);
    font-size: 11.5px; font-weight: 800; white-space: nowrap; rotate: var(--r, 0deg);
}
.gc-sign__sub i {
    display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
    background: var(--sg-bg); color: #fff; font-size: 9.5px;
}
:root[data-theme="dark"] .gc-sign__sub { color: #b9c4ff; border-color: #3452ec; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-sign__sub { color: #b9c4ff; border-color: #3452ec; }
}

.gc-hero__inner { position: relative; z-index: 2; text-align: center; pointer-events: none; }
/* Metin katmanının boş alanları tıklamayı geçirsin (tam genişlikli buton kapsayıcısı
   sağdaki LikedWin tabelasının linkini örtüyordu); yalnız link ve butonlar tıklanır */
.gc-hero__inner a, .gc-hero__inner button { pointer-events: auto; }

/* ---------------------------------------------------------------------
   Helikopter — sayfa açıldıktan 2 sn sonra sağdan gelir, "LikedWin'e"
   başlığının üstünde ~4 sn asılı kalır, soldan çıkar; 30 sn'de bir tekrar.
   Gündüz arkasında pankart taşır, gece pankart gizlenir, kokpit yanar ve
   yazıya ışık huzmesi tutar. Bütün parçalar aynı 30 sn'lik takvimi paylaşır
   (süre + 2 sn gecikme ortak), böylece JS'siz senkron kalır. Yüzdeler saniyeden
   hesaplı: giriş 0-4,4 sn · asılı 4,4-8,4 sn · çıkış 8,4-12,8 sn.
   Huzme gradyan değil: düz yarı saydam koni + bulanıklık + screen karışımı.
   --------------------------------------------------------------------- */
.gc-heli {
    --heli: #1f2b70; --heli-glass: #a9c4ff; --heli-stripe: #2544d8;
    position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none;
}
:root[data-theme="dark"] .gc-heli { --heli: #aab4d6; --heli-glass: #ffe3a3; --heli-stripe: #5b74ff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-heli { --heli: #aab4d6; --heli-glass: #ffe3a3; --heli-stripe: #5b74ff; }
}
.gc-heli__fly {
    position: absolute; left: 0; top: -60px; width: 0; height: 60px;
    animation: gcHeliFly 30s 2s infinite both;
}
@keyframes gcHeliFly {
    /* Giriş mesafesi mobildeki .72 küçültmeden sonra da ekran dışında kalacak kadar uzun
       (62vw + 60px iken pervane ucu mobilde sağ kenarda görünüyordu) */
    0%        { transform: translateX(calc(80vw + 140px)); animation-timing-function: cubic-bezier(.15, .65, .3, 1); }
    14.67%    { transform: translateX(0); }
    28%       { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
    42.67%, 100% { transform: translateX(calc(-62vw - 340px)); }
}
.gc-heli__body {
    position: absolute; left: -45px; top: 0; width: 120px; height: 50px;
    transform-origin: 45px 20px;
    /* Eğilme + havada salınma AYNI kapsayıcıda: pankart ve halat gövdeyle birlikte
       hareket eder (salınma yalnız svg'deyken kuyruk ile halat arasında boşluk açılıyordu) */
    animation: gcHeliTilt 30s 2s infinite both, gcHeliBob 2.4s ease-in-out infinite alternate;
}
/* Burun sola bakıyor: ileri uçarken burun aşağı (saat yönü tersi), frende kısa kalkış */
@keyframes gcHeliTilt {
    0%        { rotate: -9deg; }
    10.67%    { rotate: -7deg; }
    15.33%    { rotate: 4deg; }
    18.67%, 26.67% { rotate: 0deg; }
    32%, 100% { rotate: -11deg; }
}
.gc-heli__svg { position: relative; z-index: 1; display: block; width: 120px; height: 50px; max-width: none; overflow: visible; }   /* pankart+halat arkada kalsın (yeşil ışığın üstüne binmesin) */
@keyframes gcHeliBob { to { translate: 0 -4px; } }
.gc-heli__hull   { fill: var(--heli); }
.gc-heli__glass  { fill: var(--heli-glass); }
.gc-heli__stripe { fill: var(--heli-stripe); }
.gc-heli__rotor  { fill: var(--heli); transform-box: fill-box; transform-origin: center; animation: gcRotor .13s linear infinite alternate; }
@keyframes gcRotor { from { scale: 1 1; } to { scale: .1 1; } }
.gc-heli__tail   { fill: var(--heli); transform-box: fill-box; transform-origin: center; animation: gcTailRotor .28s linear infinite; }
.gc-heli__tail circle { fill: none; stroke: var(--heli); stroke-width: 1; opacity: .5; }
@keyframes gcTailRotor { to { rotate: 360deg; } }
.gc-heli__nav    { animation: gcNav 1.1s steps(1, end) infinite; }
.gc-heli__nav--r { fill: #ff4d4d; }
.gc-heli__nav--g { fill: #35d07f; animation-delay: .55s; }
@keyframes gcNav { 0% { opacity: 1; } 50% { opacity: .15; } }

/* Gündüz: arkada ipe bağlı dalgalanan pankart */
.gc-heli__banner {
    /* Sabit 30px yükseklik: dikey orta (y=29) kuyruk ucunun hizası (svg'de 110,29) */
    position: absolute; z-index: 0; left: 134px; top: 14px; height: 30px; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 8px; line-height: 1;
    background: #2544d8; color: #fff; border-radius: 4px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
    transform-origin: 0 50%; animation: gcBanner 1.1s ease-in-out infinite alternate;
}
.gc-heli__banner::before {                    /* halat: kuyruk ucundan (x=110) pankartın sol ortasına */
    content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 2px; margin-top: -1px;
    background: var(--heli); border-radius: 1px;
}
.gc-heli__logo {
    width: 16px; height: 16px; background: #fff;
    -webkit-mask: url('/assets/img/likedwin-logo-icon.svg') center / contain no-repeat;
            mask: url('/assets/img/likedwin-logo-icon.svg') center / contain no-repeat;
}
@keyframes gcBanner { from { skew: 0 -3deg; } to { skew: 0 3deg; } }

/* Gece: pankart yok, huzme var.
   display:none DEĞİL visibility: display:none olan öğenin animasyonu durur, tema
   değişip görünür olunca 30 sn'lik takvim SIFIRDAN başlar ve huzme helikopterle
   senkrondan çıkar (gündüz→gece geçişinde ışık yanlış anda yanıyordu).
   visibility:hidden öğede animasyon arka planda sürer, takvim korunur. */
.gc-heli__beam { visibility: hidden; }
:root[data-theme="dark"] .gc-heli__banner { visibility: hidden; }
:root[data-theme="dark"] .gc-heli__beam { visibility: visible; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-heli__banner { visibility: hidden; }
    :root:not([data-theme]) .gc-heli__beam { visibility: visible; }
}
.gc-heli__beam {
    /* Filtre ve karışım modu YOK: blur + clip-path birlikteyken döndürülmüş kutunun
       hayaleti "kare ışık" olarak görünüyordu. Yumuşak kenar, iç içe üç düz yarı
       saydam koniyle veriliyor (dıştan içe yoğunlaşan ışık). */
    display: block;
    position: absolute; left: -110px; top: 44px; width: 220px; height: calc(16px + clamp(22px, 2.9vw, 34px));   /* logonun alt çizgisinde biter */
    background: rgba(255, 226, 140, .10);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    opacity: 0;
    animation: gcBeam 30s 2s infinite both, gcBeamSway 1.9s ease-in-out infinite alternate;
}
.gc-heli__beam::before,
.gc-heli__beam::after { content: ""; position: absolute; inset: 0; }
.gc-heli__beam::before { background: rgba(255, 228, 150, .14); clip-path: polygon(47.5% 0, 52.5% 0, 88% 100%, 12% 100%); }
.gc-heli__beam::after  { background: rgba(255, 236, 180, .18); clip-path: polygon(48.8% 0, 51.2% 0, 75% 100%, 25% 100%); }
@keyframes gcBeam {
    0%, 15.33%  { opacity: 0; }
    18%, 25.33% { opacity: 1; }
    27.33%, 100% { opacity: 0; }
}
@keyframes gcBeamSway { from { rotate: -9deg; } to { rotate: 9deg; } }

.gc-hero__pre {
    display: inline-flex; align-items: flex-end; gap: 2px; margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; line-height: 1; color: var(--muted);
}
.gc-hero__logo { display: block; width: auto; height: clamp(22px, 2.9vw, 34px); filter: var(--logo-filter); }
.gc-hero__pre span { transform: translateY(.06em); }
.gc-hero__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(42px, 7.6vw, 92px); font-weight: 800; line-height: 1;
    letter-spacing: -.045em; color: var(--mk-ink, var(--ink)); margin: 0 0 clamp(22px, 3vw, 32px);
}

/* Sayaç satırı */
.gc-count {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px;
    margin: 0 0 clamp(26px, 3.4vw, 36px); font-size: clamp(14px, 1.5vw, 16px); font-weight: 600; color: var(--text);
}
.gc-count__txt b { color: var(--brand); }
.gc-odo {
    display: inline-flex; align-items: center; height: 38px; padding: 0 13px;
    border-radius: 999px; border: 1.5px solid var(--brand); background: var(--surface);
    color: var(--brand); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 19px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.gc-odo__col { display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2em; }
.gc-odo__strip {
    display: flex; flex-direction: column;
    --p: var(--d);
    transform: translateY(calc(var(--p) * -1.2em));
}
.gc-odo__strip > span { display: block; height: 1.2em; text-align: center; }
.gc-odo__sep { display: inline-block; line-height: 1.2em; }
.gc-odo.is-armed .gc-odo__strip { --p: 0; transition: none; }
.gc-odo.is-run .gc-odo__strip {
    --p: calc(var(--d) + 10);
    transition: transform 2.1s cubic-bezier(.16, .84, .24, 1);
    transition-delay: calc(var(--ci, 0) * 90ms);
}

.gc-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gc-hero__cta .gc-btn { min-width: 200px; }

/* =====================================================================
   3) PLATFORM BANDI
   ===================================================================== */
.gc-plats {
    position: relative; overflow: hidden; padding: 18px 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
}
.gc-plats__track { display: flex; width: max-content; animation: gcMarquee 48s linear infinite; }
.gc-plats:hover .gc-plats__track { animation-play-state: paused; }
.gc-plats__set { display: flex; gap: 12px; padding-right: 12px; }
/* --pc: platformun düz marka rengi (lwPlatformSolid). Göz yormasın diye zemin/kenar/yazı
   rengin çok seyreltilmiş karışımı; tam renk yalnız ikonda. Siyah markalar --pc almaz → nötr. */
.gc-plat {
    --pc: var(--muted);
    display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px;
    border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
    font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; text-decoration: none;
    transition: background-color .2s, border-color .2s;
    background: color-mix(in srgb, var(--pc) 9%, var(--surface-2));
    border-color: color-mix(in srgb, var(--pc) 24%, var(--line));
    color: color-mix(in srgb, var(--pc) 42%, var(--text));
}
.gc-plat:hover { background: color-mix(in srgb, var(--pc) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--pc) 40%, var(--line)); }
.gc-plat:focus-visible { outline: 2px solid color-mix(in srgb, var(--pc) 70%, var(--text)); outline-offset: 2px; }
.gc-plat i { font-size: 16px; color: var(--muted); color: color-mix(in srgb, var(--pc) 85%, var(--text)); }
:root[data-theme="dark"] .gc-plat i { color: color-mix(in srgb, var(--pc) 62%, var(--text)); }   /* koyu markalar (Tumblr, LinkedIn) koyu zeminde sönmesin */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-plat i { color: color-mix(in srgb, var(--pc) 62%, var(--text)); }
}
.gc-plat img { width: 18px; height: 18px; object-fit: contain; }
.gc-plat b { font-size: 11px; color: var(--muted); }
@keyframes gcMarquee { to { transform: translateX(-50%); } }

/* =====================================================================
   4) GÖÇ HARİTASI
   ===================================================================== */
.gc-map {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(90px, .42fr) minmax(0, .9fr);
    align-items: center;
}
.gc-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.gc-map__src { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }

.gc-src__card {
    display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--gc-card); color: inherit;
    transition: transform .3s var(--gc-spring), border-color .2s ease, box-shadow .3s ease;
}
.gc-src__card:hover, .gc-src.is-hot .gc-src__card { transform: translateX(6px); border-color: var(--brand-line-2); box-shadow: var(--gc-card-h); }
.gc-src__ico {
    flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 19px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gc-src__card:hover .gc-src__ico, .gc-src.is-hot .gc-src__ico { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.gc-src__body { display: block; min-width: 0; flex: 1; }
.gc-src__name { display: block; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 16.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.gc-src__why  { display: block; margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.gc-src__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-src__tags span {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    background: var(--err-bg); color: var(--err-fg); font-size: 11.5px; font-weight: 700;
}
.gc-src__tags i { font-size: 9.5px; }
.gc-src__go {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--muted); font-size: 12px;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--gc-spring);
}
.gc-src__card:hover .gc-src__go { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(-35deg); }

/* SVG rota çizgileri (JS çizer) */
.gc-route { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-dasharray: 5 7; animation: gcDash 1.2s linear infinite; transition: stroke .25s ease, stroke-width .25s ease; }
.gc-route.is-hot { stroke: var(--brand); stroke-width: 2.2; }
.gc-route-dot { fill: var(--brand); }
@keyframes gcDash { to { stroke-dashoffset: -24; } }

.gc-map__flow { position: relative; align-self: stretch; }
.gc-map__flow .gc-bird { display: none; }

.gc-hub {
    position: relative; z-index: 1; padding: clamp(24px, 2.8vw, 34px);
    background: var(--surface); border: 2px solid var(--brand); border-radius: 26px;
    box-shadow: var(--gc-card-h); text-align: center;
}
.gc-hub__ring {
    position: absolute; inset: -2px; border-radius: 26px; border: 2px solid var(--brand);
    pointer-events: none; animation: gcRing 2.8s ease-out infinite;
}
@keyframes gcRing { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
.gc-hub__mark {
    display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 20px; background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.gc-hub__mark img { width: 34px; height: 34px; filter: var(--logo-filter); }
.gc-hub__name { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.gc-hub__lead { margin: 2px 0 18px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.gc-hub__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; text-align: left; }
.gc-hub__list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--text); }
.gc-hub__list i {
    flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
    border-radius: 50%; background: var(--ok-bg); color: var(--ok-fg); font-size: 10px;
}
.gc-hub__cmp { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.gc-hub__cmp:hover { color: var(--brand); }

/* =====================================================================
   5) KİMLER — kaydırıcı
   ===================================================================== */
.gc-nav { display: flex; gap: 10px; flex: none; }
.gc-nav__btn {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--gc-spring), opacity .2s ease;
}
.gc-nav__btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: scale(1.06); }
.gc-nav__btn:disabled { opacity: .35; pointer-events: none; }

.gc-rail {
    --gutter: max(20px, calc((100vw - var(--container)) / 2 + 20px));
    display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 6px var(--gutter) 30px; scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
}
.gc-rail::-webkit-scrollbar { display: none; }
.gc-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gc-rail.is-drag * { pointer-events: none; }
.gc-rail:focus-visible { outline: 3px solid var(--brand-line-2); outline-offset: -3px; }

.gc-story {
    flex: none; width: clamp(280px, 30vw, 372px); scroll-snap-align: start;
    container-type: inline-size;                 /* kapak ölçüleri kart genişliğine göre (cqi) */
    --sh: clamp(112px, 36cqi, 136px);            /* kapaktaki karakter boyu */
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--gc-radius);
    overflow: hidden; box-shadow: var(--gc-card);
    transition: transform .35s var(--gc-spring), box-shadow .3s ease, opacity .62s var(--gc-spring);
}
.gc-story:hover { transform: translateY(-6px); box-shadow: var(--gc-card-h); }
.gc-story__cover {
    position: relative; height: 190px; padding: 22px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--tone-bg); color: var(--tone-fg);
}
.gc-story__ico {
    display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
    background: var(--surface); color: var(--tone-fg); font-size: 23px;
    box-shadow: 0 10px 22px -14px rgba(15, 22, 51, .45);
    transition: transform .4s var(--gc-spring);
}
.gc-story:hover .gc-story__ico { transform: rotate(-8deg) scale(1.06); }
.gc-story__who {
    position: relative; z-index: 3; margin: 0 0 8px;
    max-width: calc(100% - var(--sh) * .8);      /* sağdaki karakterin altına girmesin */
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(19px, 6.2cqi, 23px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--tone-fg);
}
.gc-story__ico { position: relative; z-index: 3; }

/* Mini sahne — karakterin arkasında, düz ve silik (yalnız opaklık katmanları) */
.gc-scene {
    position: absolute; right: calc(var(--sh) * .24); bottom: 14px; z-index: 0;
    width: calc(var(--sh) * .98); height: auto; max-width: none; overflow: visible;
    color: var(--tone-fg); pointer-events: none;
}
.gc-scene .p1 { fill: currentColor; stroke: currentColor; opacity: .12; }
.gc-scene .p2 { fill: currentColor; stroke: currentColor; opacity: .22; }
.gc-scene .p3 { fill: currentColor; stroke: currentColor; opacity: .38; }
.gc-scene [fill="none"] { fill: none; }
.gc-scene .p1:not([fill="none"]), .gc-scene .p2:not([fill="none"]), .gc-scene .p3:not([fill="none"]) { stroke: none; }
.gc-scene__rec { animation: gcRec 1.6s steps(1, end) infinite; }
@keyframes gcRec { 50% { opacity: .08; } }
.gc-scene__pin { transform-box: fill-box; transform-origin: 50% 100%; animation: gcPin 2.4s var(--gc-spring) infinite; }
@keyframes gcPin { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.gc-scene__note { animation: gcNote 3.2s ease-in-out infinite; }
.gc-scene__note.n2 { animation-delay: -1.6s; }
@keyframes gcNote { 0% { opacity: 0; translate: 0 10px; } 25%, 70% { opacity: 1; } 100% { opacity: 0; translate: 6px -16px; } }
.gc-scene__star { animation: gcStar 2.5s ease-in-out infinite; animation-delay: calc(var(--si) * .18s); }
@keyframes gcStar { 0%, 70%, 100% { opacity: .38; } 35% { opacity: .75; } }

/* Zemin: kapağın dibinde bir ton koyu şerit + üstünde akan kesikli çizgi (yürüme hissi) */
.gc-story__floor {
    position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 1;
    background: color-mix(in srgb, var(--tone-fg) 9%, var(--tone-bg));
}
.gc-story__ground { position: absolute; left: 0; top: -2px; width: 100%; height: 4px; overflow: visible; }
.gc-story__ground line {
    stroke: var(--tone-fg); stroke-opacity: .28; stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 10 12; animation: gcGround .9s linear infinite;
}
@keyframes gcGround { to { stroke-dashoffset: 22; } }

/* Karakter — sağda, zemine basarak yerinde yürür (hero'daki sprite/zıplama/gölge) */
.gc-story__walker {
    position: absolute; right: 14px; bottom: 12px; z-index: 2;
    --h: var(--sh); --bob: 1.5px;
}

.gc-story--blue   { --tone-bg: var(--brand-soft); --tone-fg: var(--brand); }
.gc-story--pink   { --tone-bg: var(--pink-bg);    --tone-fg: var(--pink-fg); }
.gc-story--green  { --tone-bg: var(--ok-bg);      --tone-fg: var(--ok-fg); }
.gc-story--amber  { --tone-bg: var(--warn-bg);    --tone-fg: var(--warn-fg); }
.gc-story--violet { --tone-bg: var(--gc-violet-bg); --tone-fg: var(--gc-violet-fg); }
.gc-story--ink    { --tone-bg: var(--surface-2);  --tone-fg: var(--ink); }

.gc-story__body { padding: 20px 22px 22px; }
.gc-story__row { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--text); }
.gc-story__row span {
    display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.gc-story__row--from { color: var(--muted); }
.gc-story__row--from span { background: var(--err-bg); color: var(--err-fg); }
.gc-story__row--to span   { background: var(--ok-bg);  color: var(--ok-fg); }
.gc-story__row--to { font-weight: 600; color: var(--ink); }
.gc-story__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.gc-story__chips span { padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }

.gc-dots { display: flex; justify-content: center; gap: 8px; }
.gc-dots[hidden] { display: none; }
.gc-dots button {
    position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: var(--line-strong); cursor: pointer;
    transition: width .3s var(--gc-spring), background .2s ease;
}
.gc-dots button::after { content: ""; position: absolute; inset: -10px -5px; }   /* parmakla rahat dokunulsun */
.gc-dots button:hover { background: var(--muted-2); }
.gc-dots button.is-on { width: 26px; background: var(--brand); }

/* =====================================================================
   6) NEDEN — sticky sahne + maketler
   ===================================================================== */
.gc-why { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gc-why__step {
    position: relative; min-height: 64vh; padding: 8px 0 8px 28px;
    display: flex; flex-direction: column; justify-content: center;
    border-left: 2px solid var(--line);
    opacity: .38; transition: opacity .45s ease, border-color .45s ease;
}
.gc-why__step:first-child { min-height: 52vh; }
.gc-why__step:last-child  { min-height: 74vh; }   /* sticky sahne son adımda header'ın altına kaçmasın */
.gc-why__step.is-active { opacity: 1; border-left-color: var(--brand); }
.gc-why__n { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--brand); margin-bottom: 14px; }
.gc-why__ico {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px;
    background: var(--brand-soft); color: var(--brand); font-size: 20px;
}
.gc-why__t { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.gc-why__d { margin: 0; max-width: 470px; font-size: 16px; line-height: 1.72; font-weight: 500; color: var(--muted); }
.gc-why__inline { display: none; }

.gc-why__stage { position: sticky; top: calc(var(--header-h) + 36px); }   /* sabit ana bar + nefes payı */
.gc-why__frame {
    position: relative; height: clamp(440px, calc(100vh - 230px), 580px);
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 30px;
    overflow: hidden;
}
.gc-why__scene {
    position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(20px, 3.4vw, 44px);
    opacity: 0; transform: translateY(26px) scale(.97); pointer-events: none;
    transition: opacity .5s ease, transform .6s var(--gc-spring);
}
.gc-why__scene.is-active { opacity: 1; transform: none; }
.gc-why__pager { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.gc-why__pager span { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: width .3s var(--gc-spring), background .2s ease; }
.gc-why__pager span.is-active { width: 28px; background: var(--brand); }

/* ---- Maket kabuğu ---- */
.gc-mock {
    position: relative; width: 100%; max-width: 440px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: var(--gc-card-h); overflow: hidden; text-align: left;
}
.gc-mock__bar {
    display: flex; align-items: center; gap: 6px; padding: 13px 16px;
    border-bottom: 1px solid var(--line); background: var(--surface);
}
.gc-mock__bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.gc-mock__bar b { margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.gc-mock__foot {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--line); background: var(--surface-2);
    font-size: 12.5px; font-weight: 700; color: var(--ok-fg);
}
.gc-mock__row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.gc-mock__row span { display: block; padding: 12px 16px; }
.gc-mock__row span + span { border-left: 1px solid var(--line); }
.gc-mock__row small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.gc-mock__row b { display: block; margin-top: 2px; font-size: 14px; font-weight: 800; color: var(--ink); }
.gc-mock__row b.is-ok { color: var(--ok-fg); }

/* ---- Maket: gerçek insan / kanıt listesi ---- */
.gc-proofs { list-style: none; margin: 0; padding: 8px; }
.gc-proof { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.gc-proof + .gc-proof { border-top: 1px solid var(--line); border-radius: 0; }
.gc-proof__ava {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    font-size: 12.5px; font-weight: 800;
}
.gc-ava--0 { background: var(--pink-bg);  color: var(--pink-fg); }
.gc-ava--1 { background: var(--brand-soft); color: var(--brand); }
.gc-ava--2 { background: var(--warn-bg);  color: var(--warn-fg); }
.gc-ava--3 { background: var(--ok-bg);    color: var(--ok-fg); }
.gc-proof__who { flex: 1; min-width: 0; }
.gc-proof__who b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.gc-proof__who small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-proof__who small i { font-size: 10px; }
.gc-proof__ok {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
    background: var(--ok-bg); color: var(--ok-fg); font-size: 11px; font-weight: 800;
}

/* ---- Maket: hedefleme ---- */
.gc-tg { padding: 16px 18px 20px; }
.gc-tg__lbl { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gc-tg__lbl:not(:first-child) { margin-top: 15px; }
.gc-tg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.gc-chip.is-on { background: var(--brand-soft); border-color: var(--brand-line-2); color: var(--brand); }
.gc-chip i { font-size: 10px; }
.gc-chip--more { border-style: dashed; }
.gc-split { display: flex; height: 38px; border-radius: 12px; overflow: hidden; font-size: 12.5px; font-weight: 800; }
.gc-split__a { width: var(--w); display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--pink-bg); color: var(--pink-fg); }
.gc-split__b { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--brand-soft); color: var(--brand); }
.gc-range { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.gc-range__fill { position: absolute; inset: -1px auto -1px -1px; width: 46%; border-radius: 999px; background: var(--brand); }
.gc-range__knob {
    position: absolute; top: 50%; left: 46%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: 50%; background: var(--surface); border: 3px solid var(--brand);
}
.gc-range__lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.gc-range__lbl span:last-child { color: var(--muted); }
/* Doğal akış: anahtar açılır, ardından etkileşimler zamana yayılarak tek tek gelir */
.gc-flow { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gc-flow .gc-tg__lbl { margin: 0; }
.gc-flow__sw {
    position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px;
    background: var(--brand); border: 1px solid var(--brand);
}
.gc-flow__sw i {
    position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
}
.gc-flow__txt { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-flow__line {
    position: relative; display: flex; justify-content: space-between; margin-top: 10px; padding-top: 2px;
}
.gc-flow__line::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 8px;
    border-top: 2px dashed var(--line-strong);
}
.gc-flow__line span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gc-flow__line i {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--brand-soft); border: 2px solid var(--brand);
}
.gc-flow__line small { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Maket: telafi grafiği ---- */
.gc-chart { position: relative; padding: 18px 16px 12px; }
.gc-chart svg { display: block; width: 100%; height: 170px; overflow: visible; }
.gc-chart__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gc-chart__line {
    fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0;
}
.gc-chart__dip { fill: var(--danger); stroke: var(--surface); stroke-width: 3; vector-effect: non-scaling-stroke; }
.gc-chart__tag {
    position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px;
    font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: var(--shadow-md);
}
.gc-chart__tag--dip { top: 62%; left: 40%; background: var(--err-bg); color: var(--err-fg); border: 1px solid var(--err-line); }
.gc-chart__tag--ok  { top: 14px; right: 14px; background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-line); }

/* ---- Maket: sipariş takibi ---- */
.gc-trk { padding: 18px; }
.gc-trk__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.gc-trk__top small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.gc-trk__top b { display: block; margin-top: 3px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gc-trk__live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font-size: 11.5px; font-weight: 800; }
.gc-trk__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-fg); animation: gcBlink 1.2s ease-in-out infinite; }
@keyframes gcBlink { 50% { opacity: .25; } }
.gc-trk__bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.gc-trk__bar span { display: block; height: 100%; width: 74.2%; border-radius: 999px; background: var(--brand); }
.gc-trk__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.gc-trk__steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.gc-trk__steps i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--line); }
.gc-trk__steps li.is-done { color: var(--text); }
.gc-trk__steps li.is-done i { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.gc-trk__steps li.is-now { background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.gc-trk__steps li.is-now i { background: var(--brand); color: #fff; border-color: var(--brand); }
.gc-trk__steps li.is-now i::before { display: inline-block; animation: gcSpin 1.1s linear infinite; }
@keyframes gcSpin { to { transform: rotate(360deg); } }

/* ---- Maket giriş animasyonları (sahne aktifken / mobilde görülünce) ---- */
.is-active > .gc-mock .gc-proof,
.is-seen .gc-mock .gc-proof { animation: gcRowIn .55s var(--gc-spring) both; animation-delay: calc(var(--k) * 180ms + 120ms); }
.is-active > .gc-mock .gc-proof__ok,
.is-seen .gc-mock .gc-proof__ok { animation: gcPop .45s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(var(--k) * 180ms + 520ms); }
.is-active > .gc-mock .gc-chip.is-on,
.is-seen .gc-mock .gc-chip.is-on { animation: gcPop .45s cubic-bezier(.2, .9, .3, 1.35) both .25s; }
.is-active > .gc-mock .gc-split__a,
.is-seen .gc-mock .gc-split__a { animation: gcGrowW .9s var(--gc-spring) both .35s; }
.is-active > .gc-mock .gc-range__fill,
.is-seen .gc-mock .gc-range__fill { animation: gcFill46 1s var(--gc-spring) both .5s; }
.is-active > .gc-mock .gc-range__knob,
.is-seen .gc-mock .gc-range__knob { animation: gcKnob46 1s var(--gc-spring) both .5s; }
.is-active > .gc-mock .gc-flow__sw,
.is-seen .gc-mock .gc-flow__sw { animation: gcSwOn .45s ease both .9s; }
.is-active > .gc-mock .gc-flow__sw i,
.is-seen .gc-mock .gc-flow__sw i { animation: gcSwKnob .45s var(--gc-spring) both .9s; }
.is-active > .gc-mock .gc-flow__line span,
.is-seen .gc-mock .gc-flow__line span { animation: gcPop .4s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(var(--k) * 260ms + 1.25s); }
.is-active > .gc-mock .gc-chart__line,
.is-seen .gc-mock .gc-chart__line { animation: gcDraw 1.8s cubic-bezier(.4, 0, .2, 1) both .15s; }
.is-active > .gc-mock .gc-chart__dip,
.is-seen .gc-mock .gc-chart__dip { animation: gcPop .45s cubic-bezier(.2, .9, .3, 1.35) both 1.1s; transform-box: fill-box; transform-origin: center; }
.is-active > .gc-mock .gc-chart__tag--dip,
.is-seen .gc-mock .gc-chart__tag--dip { animation: gcRowIn .5s var(--gc-spring) both 1.2s; }
.is-active > .gc-mock .gc-chart__tag--ok,
.is-seen .gc-mock .gc-chart__tag--ok { animation: gcRowIn .5s var(--gc-spring) both 1.75s; }
.is-active > .gc-mock .gc-trk__bar span,
.is-seen .gc-mock .gc-trk__bar span { animation: gcFill74 1.6s var(--gc-spring) both .25s; }
.is-active > .gc-mock .gc-trk__steps li,
.is-seen .gc-mock .gc-trk__steps li { animation: gcRowIn .5s var(--gc-spring) both; }
.is-active > .gc-mock .gc-trk__steps li:nth-child(2), .is-seen .gc-mock .gc-trk__steps li:nth-child(2) { animation-delay: .12s; }
.is-active > .gc-mock .gc-trk__steps li:nth-child(3), .is-seen .gc-mock .gc-trk__steps li:nth-child(3) { animation-delay: .24s; }
.is-active > .gc-mock .gc-trk__steps li:nth-child(4), .is-seen .gc-mock .gc-trk__steps li:nth-child(4) { animation-delay: .36s; }

@keyframes gcRowIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gcPop    { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes gcGrowW  { from { width: 0; } }
@keyframes gcFill46 { from { width: 0; } to { width: 46%; } }
@keyframes gcKnob46 { from { left: 0; } to { left: 46%; } }
@keyframes gcFill74 { from { width: 0; } to { width: 74.2%; } }
@keyframes gcDraw   { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes gcSwOn   { from { background: var(--line-strong); border-color: var(--line-strong); } }
@keyframes gcSwKnob { from { left: 2px; } }

/* =====================================================================
   7) BAVULSUZ GÖÇ
   ===================================================================== */
.gc-light { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gc-light__card {
    padding: clamp(22px, 2.4vw, 30px); border-radius: var(--gc-radius);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--gc-card);
    transition: transform .35s var(--gc-spring), box-shadow .3s ease, border-color .2s ease, opacity .62s var(--gc-spring);
}
.gc-light__card:hover { transform: translateY(-6px); box-shadow: var(--gc-card-h); border-color: var(--tone-fg); }
.gc-light__ico {
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 16px;
    background: var(--tone-bg); color: var(--tone-fg); font-size: 21px;
    transition: transform .45s var(--gc-spring);
}
.gc-light__card:hover .gc-light__ico { transform: rotate(-10deg) scale(1.08); }
.gc-light__t { margin: 0 0 8px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 18.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.gc-light__d { margin: 0; font-size: 14.5px; line-height: 1.62; font-weight: 500; color: var(--muted); }
.gc-tone--blue  { --tone-bg: var(--brand-soft); --tone-fg: var(--brand); }
.gc-tone--green { --tone-bg: var(--ok-bg);      --tone-fg: var(--ok-fg); }
.gc-tone--amber { --tone-bg: var(--warn-bg);    --tone-fg: var(--warn-fg); }
.gc-tone--pink  { --tone-bg: var(--pink-bg);    --tone-fg: var(--pink-fg); }

/* =====================================================================
   8) ÜÇ ADIM
   ===================================================================== */
.gc-steps { position: relative; }
.gc-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; z-index: 1; }
.gc-steps__line {
    position: absolute; top: 36px; left: calc(100% / 6); right: calc(100% / 6); height: 2px;
    background: var(--line-strong); z-index: 0;
}
.gc-steps__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); transition: width 2.2s cubic-bezier(.45, 0, .2, 1) .3s; }
.gc-steps__bird { --gc-bird: var(--brand); top: -22px; left: 0; width: 34px; margin-left: -17px; transition: left 2.2s cubic-bezier(.45, 0, .2, 1) .3s; }
.gc-steps.is-go .gc-steps__fill { width: 100%; }
.gc-steps.is-go .gc-steps__bird { left: 100%; }

.gc-step { text-align: center; }
.gc-step__dot {
    position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px;
    border-radius: 22px; background: var(--surface); border: 1px solid var(--line-strong);
    color: var(--brand); font-size: 24px; box-shadow: var(--gc-card);
}
.gc-step__dot b {
    position: absolute; top: -8px; right: -8px; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff;
    font-size: 12px; font-weight: 800; border: 3px solid var(--bg);
}
.gc-step__t { margin: 0 0 8px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.gc-step__d { margin: 0 auto; max-width: 290px; font-size: 14.5px; line-height: 1.62; font-weight: 500; color: var(--muted); }

/* =====================================================================
   9) YORUMLAR
   ===================================================================== */
.gc-voices { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.gc-score {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 30px; border-radius: var(--gc-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--gc-card);
}
.gc-score__pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }
.gc-score__v { margin: 18px 0 6px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.gc-score__stars { display: flex; gap: 3px; color: #f5b301; font-size: 15px; }
.gc-score__l { margin: 8px 0 20px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.gc-score__lnk { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--brand); }
.gc-score__lnk i { transition: transform .25s var(--gc-spring); }
.gc-score__lnk:hover i { transform: translateX(3px); }

.gc-quotes { display: grid; gap: 14px; min-width: 0; overflow: hidden; border-radius: var(--gc-radius); }
.gc-quotes__row { overflow: hidden; }
.gc-quotes__track { display: flex; gap: 14px; width: max-content; animation: gcMarquee 60s linear infinite; }
.gc-quotes__row--rev .gc-quotes__track { animation-direction: reverse; animation-duration: 68s; }
.gc-quotes:hover .gc-quotes__track { animation-play-state: paused; }
.gc-quote {
    position: relative; flex: none; width: 330px; margin: 0; padding: 22px 22px 18px;
    border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.gc-quote__mark { position: absolute; top: 18px; right: 20px; font-size: 20px; color: var(--brand-line-2); }
.gc-quote blockquote { margin: 0; padding-right: 22px; font-size: 14.5px; line-height: 1.62; font-weight: 500; color: var(--text); }
.gc-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.gc-quote__ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }

/* =====================================================================
   10) SSS
   ===================================================================== */
.gc-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gc-faq__head { position: sticky; top: calc(var(--header-h) + 36px); }
.gc-faq__head .gc-sub { margin: 0 0 24px; }
.gc-faq__list { display: grid; gap: 10px; }
.gc-qa {
    border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
    transition: border-color .2s ease, box-shadow .3s ease, opacity .62s var(--gc-spring), transform .62s var(--gc-spring);
}
.gc-qa.is-open { border-color: var(--brand-line-2); box-shadow: var(--gc-card); }
.gc-qa__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    padding: 20px 22px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--ink);
}
.gc-qa__q i {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 12px;
    transition: transform .35s var(--gc-spring), background .2s ease, color .2s ease, border-color .2s ease;
}
.gc-qa.is-open .gc-qa__q i { transform: rotate(45deg); background: var(--brand); color: #fff; border-color: var(--brand); }
.gc-qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--gc-spring); }
.gc-qa.is-open .gc-qa__a { grid-template-rows: 1fr; }
.gc-qa__a > div { overflow: hidden; }
.gc-qa__a p { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 1.7; font-weight: 500; color: var(--muted); }

/* =====================================================================
   11) KAPANIŞ — hero'nun gökyüzüne dönüş
   ===================================================================== */
.gc-final {
    --g:  clamp(96px, 11vw, 160px);
    --ph: clamp(130px, 14vw, 210px);
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(84px, 10vw, 140px) 0 calc(var(--ph) + var(--g) * .12 + 40px);
    background: var(--gc-sky); text-align: center;
}
/* Footer'daki kopya: karakter görselleri bölüm görünüme yaklaşana kadar indirilmez
   (uygulanmayan background-image istenmez). buyuk-goc.js initLazyScene → .is-near */
.gc-final--lazy:not(.is-near) .gc-sprite { background-image: none !important; }
.gc-final__inner { position: relative; z-index: 2; max-width: 680px; pointer-events: none; }
.gc-final__inner a, .gc-final__inner button { pointer-events: auto; }   /* boş alan tabela linkini örtmesin */
.gc-final__title {
    margin: 0 0 14px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(34px, 5.4vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
    color: var(--mk-ink, var(--ink)); text-wrap: balance;
}
/* Kapanışta helikopter başlığın ilk satırını ("Sıra Sizde.") aydınlatır:
   huzme o satırın altında biter ve satır genişliğini kaplar (hero'da logoya göre) */
.gc-final { --fs: clamp(34px, 5.4vw, 64px); }
.gc-final .gc-heli__beam { height: calc(38px + var(--fs) * .98); width: calc(var(--fs) * 5.2); left: calc(var(--fs) * -2.6); }
@media (max-width: 720px) {   /* helikopter .72 küçük: huzme ölçüsü ona göre büyütülür */
    .gc-final .gc-heli__beam { height: calc((32px + var(--fs) * .98) / .72); width: 222px; left: -111px; }
}
.gc-final__text { margin: 0 auto 30px; max-width: 520px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; font-weight: 500; color: var(--muted); }
.gc-final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Kademeli belirme gecikmesi — bileşenin kendi transition'ı marketing.css'teki
   [data-reveal] gecikmesini sıfırlıyor, burada geri veriliyor (hover'da 0). */
.gc-story[data-reveal], .gc-light__card[data-reveal], .gc-qa[data-reveal], .gc-btn[data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
.gc-story:hover, .gc-light__card:hover, .gc-btn[data-reveal]:hover { transition-delay: 0s; }

@keyframes gcDown { from { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { top: 64px; opacity: 0; } }

/* =====================================================================
   12) RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
    .gc-light { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-voices { grid-template-columns: minmax(0, 1fr); }
    .gc-score { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
    .gc-score__v { margin: 0; font-size: 52px; }
    .gc-score__l { margin: 0; }
}

@media (max-width: 960px) {
    /* Harita: tek sütun, kaynaklar → kuş → merkez */
    .gc-map { grid-template-columns: minmax(0, 1fr); }
    .gc-map__svg { display: none; }
    .gc-map__flow { height: 88px; }
    .gc-map__flow::before {
        content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 0;
        border-left: 2px dashed var(--brand-line-2);
    }
    .gc-map__flow .gc-bird { display: block; --gc-bird: var(--brand); left: 50%; width: 32px; margin-left: -16px; animation: gcDown 2.4s ease-in-out infinite; }
    .gc-src__card:hover, .gc-src.is-hot .gc-src__card { transform: translateY(-3px); }

    /* Neden: sticky sahne yok, her adımın altında kendi maketi */
    .gc-why { grid-template-columns: minmax(0, 1fr); }
    .gc-why__stage { display: none; }
    .gc-why__step, .gc-why__step:first-child, .gc-why__step:last-child { min-height: 0; opacity: 1; padding: 0; border: 0; }
    .gc-why__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .gc-why__inline { display: block; margin-top: 24px; padding: 18px; border-radius: 24px; background: var(--bg-soft); border: 1px solid var(--line); }
    .gc-why__inline .gc-mock { max-width: none; }

    .gc-faq { grid-template-columns: minmax(0, 1fr); }
    .gc-faq__head { position: static; }
}

@media (max-width: 720px) {
    .gc-hero { min-height: 0; padding-top: 88px; padding-bottom: calc(var(--ph) + var(--g) * .12 + 72px); }   /* mobilde biraz daha yüksek: üstte ve butonlarla kalabalık arasında nefes payı */
    .gc-hero__cta { gap: 10px; }
    .gc-hero__cta .gc-btn { flex: 1 1 0; min-width: 0; padding: 8px 12px; font-size: 14px; white-space: normal; line-height: 1.25; text-align: center; }
    .gc-hero__cta .gc-btn i { display: none; }
    .gc-heli { scale: .72; }
    .gc-heli__beam { height: calc(16px + 22px); }   /* "Ücretsiz Başlayın" tek satıra sığsın */
    /* Sayaç ve metin mobilde de yan yana; metin gerekirse sayının yanında iki satıra iner */
    /* Sayaç + metin HER ZAMAN tek satır: dar ekranda ikisi birlikte orantılı küçülür
       (375px'te satır tam sınırdaydı, 360px'te metin alt satıra iniyordu).
       min() üst sınırları eski sabit ölçüler; altında vw'ye bağlı. */
    .gc-count { flex-wrap: nowrap; gap: min(10px, 2.4vw); text-align: left; font-size: min(13.5px, 3.3vw); line-height: 1.35; }
    .gc-count__txt { white-space: nowrap; }
    .gc-odo { flex: none; height: min(34px, 8.6vw); padding: 0 min(11px, 2.6vw); font-size: min(17px, 4.2vw); }
    .gc-cloud--2 { display: none; }
    .gc-sun { top: 9%; right: 7%; }
    /* Şehir: ortayı kırpmak yerine silüeti tam ölçekte serip kulelerin yoğun
       olduğu sol bölümü göster (orta kesim alçak binalı, mobilde boş kalıyordu) */
    .gc-city--far  { width: calc(200px / 260 * 1440); left: -10px; }
    .gc-city--near { width: calc(160px / 260 * 1440); left: -40px; }
    .gc-sign { scale: .82; }
    .gc-sign--old { transform-origin: left bottom; }
    .gc-sign--new { transform-origin: right bottom; scale: .64; }   /* mobilde ekranın yarısını kaplamasın */
    .gc-sign__sub:nth-child(n+3) { display: none; }   /* mobilde yalnız ilk iki levha */
    .gc-sign--old .gc-sign__plate:nth-child(n+4) { display: none; }

    .gc-head--split { flex-direction: column; align-items: flex-start; }
    .gc-nav { display: none; }

    .gc-light { grid-template-columns: minmax(0, 1fr); }

    /* Adımlar: dikey çizgi solda */
    .gc-steps__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .gc-steps__line { top: 36px; bottom: 36px; left: 35px; right: auto; width: 2px; height: auto; }
    .gc-steps__fill { inset: 0 0 auto 0; width: 100%; height: 0; transition-property: height; }
    .gc-steps.is-go .gc-steps__fill { width: 100%; height: 100%; }
    .gc-steps__bird { display: none; }
    .gc-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; text-align: left; }
    .gc-step__dot { grid-row: span 2; margin: 0; }
    .gc-step__t { align-self: end; }
    .gc-step__d { margin: 0; max-width: none; }

    .gc-quote { width: 280px; }
    .gc-src__card { align-items: flex-start; gap: 13px; padding: 16px; }
    .gc-src__ico { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; }
    .gc-src__go { display: none; }
    .gc-why__inline { padding: 12px; }
    .gc-proof { gap: 10px; padding: 9px 6px; }
    .gc-proof__ok { padding: 4px 7px; }
    .gc-mock__row span { padding: 10px 12px; }
    .gc-chart__tag--dip { left: 26%; }
}

/* =====================================================================
   13) HAREKETİ AZALT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .gc-bird, .gc-bird__w, .gc-cloud, .gc-stars i, .gc-sun, .gc-hub__ring,
    .gc-walker, .gc-walker__body, .gc-walker__shadow, .gc-rig__p, .gc-sprite, .gc-sprite--4, .gc-sprite--8,
    .gc-route, .gc-plats__track, .gc-quotes__track, .gc-trk__live i, .gc-sign__swing, .gc-city .w, .gc-city .a,
    .gc-scene *, .gc-story__ground line { animation: none !important; }
    .gc-btn--shine::after { display: none; }
    .gc-heli { display: none; }
    /* Yürüyenler şeride eşit aralıkla dizilip durur */
    .gc-walker { transform: translateX(calc(var(--rx) * 1vw - 50%)); }
    .gc-odo.is-run .gc-odo__strip { transition: none; }
    .gc-why__scene, .gc-steps__fill, .gc-steps__bird { transition: none; }
    .is-active > .gc-mock *, .is-seen .gc-mock * { animation: none !important; }
    .gc-plats__track, .gc-quotes__track { flex-wrap: wrap; width: auto; }
}

/* =====================================================================
   14) ANASAYFA ÜST KATMANI — göç hero'su anasayfa hero'sunun üstünde
   ---------------------------------------------------------------------
   index.php: <div class="lw-goc-stack is-goc"> [.gc-takeover: gc-hero + gc-plats bandı] [.hero] </div>
   İkisi aynı ızgara hücresinde üst üste; alttaki anasayfa hero'su yerleşimini
   korur (JS ölçümleri bozulmasın diye display:none değil visibility:hidden).
   Çarpı → buyuk-goc.js: katman söner, yükseklik anasayfa hero'suna iner.
   Bu dosya anasayfada yalnızca katman gösterilecekse yüklenir.
   ===================================================================== */
.lw-goc-stack { position: relative; display: grid; }
.lw-goc-stack > * { grid-area: 1 / 1; min-width: 0; }
.lw-goc-stack > .gc-takeover { z-index: 2; }
.lw-goc-stack > .hero { align-self: start; }   /* doğal boyu ölçülebilsin (kapanışta hedef yükseklik) */
/* Katman açıkken anasayfa hero'su yüksekliğe KATILMAZ (o daha uzun; katmanı kendi boyuna
   geriyordu). Mutlak konumda yerleşimini korur, kapanışta akışa döner. */
.lw-goc-stack.is-goc { overflow: hidden; }
.lw-goc-stack.is-goc > .hero { visibility: hidden; position: absolute; top: 0; left: 0; right: 0; }
.lw-goc-stack.is-closing { overflow: hidden; transition: height .5s var(--gc-spring); }

/* marketing.css anasayfada yok: başlık rengi /buyuk-goc'takiyle aynı kalsın */
.gc-takeover { --mk-ink: #0f1633; }
:root[data-theme="dark"] .gc-takeover { --mk-ink: var(--ink); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-takeover { --mk-ink: var(--ink); }
}

.gc-takeover.is-leaving {
    opacity: 0; transform: translateY(-14px) scale(.985); pointer-events: none;
    transition: opacity .38s ease, transform .45s var(--gc-spring);
}
.lw-goc-stack.is-closing > .hero { animation: gcHomeIn .55s var(--gc-spring) both .1s; }
@keyframes gcHomeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Gizle butonu — sağ üst hap: "Gizle" yazısı + çarpı; düz yüzey */
.gc-x {
    position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 24px); z-index: 30;
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 16px;
    border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
    transition: transform .25s var(--gc-spring), color .2s ease, border-color .2s ease;
}
.gc-x i {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-2); font-size: 15px;
    transition: transform .3s var(--gc-spring), background-color .2s ease;
}
.gc-x:hover { color: var(--brand); border-color: var(--brand-line-2); }
.gc-x:hover i { transform: rotate(90deg); background: var(--brand-soft); }
.gc-x:active { transform: scale(.96); }
.gc-x:focus-visible { outline: 3px solid var(--brand-line-2); outline-offset: 3px; }

@media (max-width: 720px) {
    .gc-x { height: 40px; padding: 0 5px 0 14px; font-size: 13px; gap: 7px; }
    .gc-x i { width: 30px; height: 30px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .gc-takeover.is-leaving, .lw-goc-stack.is-closing { transition: none; }
    .lw-goc-stack.is-closing > .hero { animation: none; }
    .gc-x, .gc-x i, .gc-x:hover i { transition: none; transform: none; }
}