/* ════════════════════════════════════════════════════════════════════════════
   SkyraIrl — Platform Rehberi (Info)  ·  kozmik konsept, çift tema, GSAP orbit
   Renkler --bs-* token'larından (açık/koyu otomatik). Buton standardı korunur.
   ════════════════════════════════════════════════════════════════════════════ */

.info-hero, .info-timeline-section, .info-faq-section {
    --inf-text:  var(--bs-text, #e8eefc);
    --inf-muted: var(--bs-muted, rgba(184,200,228,.78));
    --inf-dim:   var(--bs-dim, rgba(150,168,200,.55));
    --inf-panel: var(--bs-panel, #0e1730);
    --inf-line:  var(--bs-line, rgba(120,150,210,.20));
    --inf-cyan:  var(--bs-cyan, #46d9ff);
    --inf-violet:var(--bs-violet, #8b7bff);
    --inf-amber: var(--bs-amber, #f0a81e);
}

/* ══════════════ HERO ══════════════ */
.info-hero {
    position: relative; overflow: hidden;
    min-height: clamp(560px, 86vh, 820px);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.info-hero__stars, .info-hero__nebula { position: absolute; inset: -10% -10% 0; pointer-events: none; will-change: transform; }
.info-hero__stars {
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 40% 80%, rgba(160,200,255,.6), transparent),
        radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,.45), transparent);
    opacity: .8;
}
.info-hero__nebula {
    background:
        radial-gradient(circle at 28% 32%, color-mix(in srgb, var(--inf-violet) 22%, transparent), transparent 42%),
        radial-gradient(circle at 74% 64%, color-mix(in srgb, var(--inf-cyan) 16%, transparent), transparent 44%);
    filter: blur(8px);
}
html[data-theme="light"] .info-hero__stars { opacity: .3; }

.info-hero__content { position: relative; z-index: 2; padding: 40px 18px; max-width: 760px; }
.info-hero__title { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 800; color: var(--inf-text); margin: 26px 0 10px; letter-spacing: -.01em; }
.info-hero__subtitle { font-size: clamp(.95rem, 1.6vw, 1.15rem); color: var(--inf-muted); margin: 0 auto 22px; max-width: 540px; line-height: 1.5; }

.info-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.info-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; }

.info-scroll-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-top: 28px; border-radius: 50%;
    border: 1px solid var(--inf-line); color: var(--inf-muted);
    text-decoration: none; font-size: 1.1rem; animation: info-bob 1.8s ease-in-out infinite;
}
.info-scroll-cta:hover { color: var(--inf-text); border-color: var(--inf-cyan); }
@keyframes info-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ══════════════ ORBIT ══════════════ */
.info-orbit { position: relative; width: clamp(280px, 42vw, 360px); aspect-ratio: 1; margin: 0 auto; }
.info-orbit-rings { position: absolute; inset: 0; pointer-events: none; }
.info-orbit-ring { position: absolute; border-radius: 50%; border: 1px solid var(--inf-line); }
.info-orbit-ring.r1 { inset: 4%; border-style: dashed; opacity: .7; }
.info-orbit-ring.r2 { inset: 18%; }
.info-orbit-ring.r3 { inset: 34%; border-style: dashed; opacity: .5; }

.info-orbit-sun {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 33%; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background:
        radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--inf-amber) 30%, transparent), transparent 64%),
        color-mix(in srgb, var(--inf-panel) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--inf-amber) 36%, var(--inf-line));
    box-shadow: 0 0 40px color-mix(in srgb, var(--inf-amber) 18%, transparent);
    z-index: 3;
}
.info-orbit-sun-mark { width: 30px; height: 30px; color: var(--inf-cyan); }
.info-orbit-sun-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.info-orbit-sun-name { font-size: .72rem; font-weight: 800; color: var(--inf-text); letter-spacing: .02em; }

.info-orbit-planets { position: absolute; inset: 0; }
.info-planet {
    position: absolute; width: 46px; height: 46px; border-radius: 50%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: color-mix(in srgb, var(--inf-panel) 90%, transparent);
    border: 1px solid var(--inf-line); cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.info-planet:hover, .info-planet:focus-visible {
    border-color: var(--inf-cyan); transform: scale(1.16); outline: none;
    box-shadow: 0 0 18px color-mix(in srgb, var(--inf-cyan) 40%, transparent);
}
.info-planet-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: .66rem; padding: 3px 8px; border-radius: var(--r-pill, 999px);
    background: var(--inf-panel); border: 1px solid var(--inf-line); color: var(--inf-text);
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.info-planet:hover .info-planet-tip, .info-planet:focus-visible .info-planet-tip { opacity: 1; }

/* ══════════════ BÖLÜM BAŞLIKLARI ══════════════ */
.info-section-intro { max-width: 720px; margin: 0 auto 40px; }
.info-eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .22em; font-weight: 700; color: var(--inf-cyan); margin-bottom: 8px; }
.info-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--inf-text); margin: 0 0 8px; }
.info-sub { color: var(--inf-muted); font-size: .98rem; margin: 0; }

/* ══════════════ TIMELINE ══════════════ */
.info-timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 64px; }
.info-timeline::before {
    content: ''; position: absolute; left: 23px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, transparent, var(--inf-violet), var(--inf-cyan), transparent); opacity: .55;
}
.info-tl-item { position: relative; margin-bottom: 26px; }
.info-tl-icon {
    position: absolute; left: -64px; top: 0; width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: color-mix(in srgb, var(--inf-panel) 92%, transparent);
    border: 2px solid color-mix(in srgb, var(--inf-violet) 50%, var(--inf-line));
    box-shadow: 0 0 18px color-mix(in srgb, var(--inf-violet) 22%, transparent); z-index: 2;
}
.info-tl-card {
    background: color-mix(in srgb, var(--inf-panel) 82%, transparent);
    border: 1px solid var(--inf-line); border-radius: var(--r-lg, 14px);
    padding: 18px 20px; box-shadow: var(--bs-shadow, 0 10px 28px rgba(0,0,0,.28));
}
.info-tl-card.is-target { border-color: var(--inf-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inf-cyan) 18%, transparent); }
.info-tl-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inf-cyan); margin-bottom: 6px; }
.info-tl-title { font-size: 1.12rem; font-weight: 700; color: var(--inf-text); margin: 0 0 8px; }
.info-tl-desc { font-size: .92rem; color: var(--inf-muted); margin: 0 0 6px; line-height: 1.5; }
.info-tl-detail { font-size: .85rem; color: var(--inf-dim); margin: 0 0 10px; line-height: 1.45; }
.info-tl-tip { display: block; font-size: .8rem; color: color-mix(in srgb, var(--inf-amber) 88%, var(--inf-dim)); }

/* ══════════════ SCROLL REVEAL ══════════════ */
.info-tl-reveal { opacity: 0; transform: translateY(26px); }
.info-tl-reveal.info-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }

/* ══════════════ SSS ══════════════ */
.info-accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.info-acc-item { background: color-mix(in srgb, var(--inf-panel) 82%, transparent); border: 1px solid var(--inf-line); border-radius: var(--r-md, 12px); overflow: hidden; }
.info-acc-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 15px 18px; color: var(--inf-text); font-size: .98rem; font-weight: 600;
}
.info-acc-btn:hover { color: var(--inf-cyan); }
.info-acc-chevron { color: var(--inf-cyan); font-size: 1.3rem; transition: transform .25s; flex: none; }
.info-acc-btn[aria-expanded="true"] .info-acc-chevron { transform: rotate(90deg); }
.info-acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.info-acc-body.info-acc-open { max-height: 260px; }
.info-acc-body p { margin: 0; padding: 0 18px 16px; color: var(--inf-muted); font-size: .9rem; line-height: 1.55; }

/* ══════════════ FINAL CTA ══════════════ */
.info-final-cta { text-align: center; max-width: 620px; margin: 48px auto 0; padding: 32px 20px; border-top: 1px solid var(--inf-line); }
.info-final-title { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; color: var(--inf-text); margin: 0 0 18px; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 520px) {
    .info-timeline { padding-left: 52px; }
    .info-timeline::before { left: 19px; }
    .info-tl-icon { left: -52px; width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ══════════════ HAREKETİ AZALT ══════════════ */
@media (prefers-reduced-motion: reduce) {
    .info-tl-reveal { opacity: 1; transform: none; }
    .info-scroll-cta { animation: none; }
}