/** * Hero modül paneli (partials/landing-hero-module.html) — "Yörünge / Komuta Merkezi". * Merkezde canlı çekirdek (hub), 7 modül yörüngede; her biri merkeze akış * animasyonlu veri hattıyla bağlı. Modül üzerine gelince merkez ekran o * modülün bilgisini gösterir, hattı renklenir (load-landing-hero-module.js). * Tamamen kendi kendine yeter (orb- öneki). Dar ekranda premium listeye düşer. * Aktif kart: ile data-hero-nav eşleşmesi. */ .hero-module-section.hero-module-section--spaced { margin-top: clamp(2.5rem, 4vw, 3.5rem); } .orb { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1; margin-inline: auto; transform: translateY(-44px); /* sağ panel bir tık yukarıda dursun */ } /* ---------- Veri hatları (merkez → modül, akış animasyonlu) ---------- */ .orb-cizgiler { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .orb-hat { stroke: rgba(var(--hm-c), 0.5); stroke-width: 0.55; stroke-linecap: round; stroke-dasharray: 0.01 2.6; /* akan noktacıklar (boncuk dizisi) */ animation: orb-akis 1.8s linear infinite, orb-belir 0.8s ease 0.45s both; transition: stroke 0.25s ease, stroke-width 0.25s ease; } .orb-hat--aktif { stroke: rgba(var(--hm-c), 0.9); stroke-width: 0.95; animation-duration: 0.7s, 0.8s; } @keyframes orb-akis { to { stroke-dashoffset: -10; } } @keyframes orb-belir { from { opacity: 0; } to { opacity: 1; } } /* ---------- Merkez çekirdek (hub) ---------- */ .orb-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 43%; aspect-ratio: 1 / 1; border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; /* Porselen tabak: çukur hissi kenarlardaki iç gölge/ışıktan gelir; merkez bembeyaz kalır */ background: #ffffff; box-shadow: inset 0 10px 22px -12px rgba(15, 23, 42, 0.16), inset 0 -8px 16px -10px rgba(255, 255, 255, 0.95), 0 2px 4px rgba(15, 23, 42, 0.05), 0 30px 60px -25px rgba(15, 23, 42, 0.32); animation: orb-hub-gel 0.6s cubic-bezier(0.22, 0.9, 0.3, 1.2) both; } /* Tabak çukurunu çevreleyen ince iç halka */ .orb-hub::after { content: ""; position: absolute; inset: 7.5%; border-radius: 50%; box-shadow: inset 0 2px 6px -2px rgba(15, 23, 42, 0.09), 0 1px 0 rgba(255, 255, 255, 0.9); pointer-events: none; } @keyframes orb-hub-gel { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Dönen gradyan halka */ .orb-hub-halka { position: absolute; inset: -7px; border-radius: 50%; padding: 2px; background: conic-gradient( from 0deg, rgba(16, 185, 129, 0) 0%, rgba(16, 185, 129, 0.65) 22%, rgba(59, 130, 246, 0.45) 45%, rgba(16, 185, 129, 0) 70% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: orb-don 7s linear infinite; pointer-events: none; } @keyframes orb-don { to { transform: rotate(360deg); } } /* Hub içerikleri (varsayılan ↔ modül detayı, çapraz geçiş) */ .orb-hub-varsayilan, .orb-hub-detay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12%; transition: opacity 0.22s ease, transform 0.22s ease; } .orb-hub-varsayilan strong, .orb-hub-detay strong { font-size: clamp(0.92rem, 1.4vw, 1.06rem); font-weight: 800; letter-spacing: -0.02em; color: #0f172a; line-height: 1.22; /* Porselene kazınmış yazı: alt kenarda ince ışık */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } /* Hub yazıları bir tık aşağıda (transform: logo yerinden oynamaz) */ .orb-hub-varsayilan .orb-hub-marka { transform: translateY(8px); } .orb-hub-varsayilan .orb-hub-alt { transform: translateY(15px); /* rozetler başlıktan bir tık daha aşağıda */ } /* Marka yazısı — ana sayfaya link; rengi bulunulan sayfanın kimliği */ .orb-hub-marka { text-decoration: none; transition: opacity 0.18s ease; } .orb-hub-marka:hover { opacity: 0.78; } .orb-hub-marka:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; } .orb-hub-marka strong { color: #1d1d1f; } /* Apple tarzı premium siyah */ /* Merkez logo — başlığın üstünde ortalı, zeminsiz */ .orb-logo { width: clamp(34px, 3.8vw, 42px); height: clamp(34px, 3.8vw, 42px); object-fit: contain; margin-top: -26px; margin-bottom: 2px; } .orb-hub-alt { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.66rem; font-weight: 600; color: #64748b; } /* Rozetler — elle basılmış premium etiket hissi: hafif eğik, ince ışık + gölge */ .orb-roz { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.015em; line-height: 1.35; border: 1px solid; /* Tabağa gömülü rozet: üst iç gölge + alt iç ışık + oyuk alt kenarında beyaz çizgi */ box-shadow: inset 0 1.5px 3px rgba(15, 23, 42, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.9); } .orb-roz--1 { background: #e6f7f1; border-color: #b8e7d3; color: #047857; transform: rotate(-2deg); } .orb-roz--2 { background: #e9f0fd; border-color: #c3d7f9; color: #1d4ed8; transform: rotate(1.6deg); } .orb-roz--3 { background: #fbecf0; border-color: #f0c6d2; color: #881337; transform: rotate(-1.4deg); } .orb-hub-detay span { font-size: 0.72rem; line-height: 1.4; color: #64748b; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); } .orb-hub-detay { opacity: 0; transform: scale(0.92); pointer-events: none; } .orb--detayda .orb-hub-varsayilan { opacity: 0; transform: scale(0.92); } .orb--detayda .orb-hub-detay { opacity: 1; transform: scale(1); } /* ---------- Yörünge düğümleri ---------- */ .orb-dugum { position: absolute; left: var(--ox); top: var(--oy); transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 122px; text-decoration: none; color: inherit; animation: orb-gel 0.55s cubic-bezier(0.22, 0.9, 0.3, 1.25) both; animation-delay: var(--gecikme, 0s); } @keyframes orb-gel { from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .orb-ic { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background: rgb(var(--hm-c)); border: 1px solid rgba(var(--hm-c), 0.35); box-shadow: 0 12px 26px -14px rgba(15, 23, 42, 0.3); transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; animation: orb-yuz 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--gecikme, 0s) * 4); } @keyframes orb-yuz { from { translate: 0 -3px; } to { translate: 0 3px; } } .orb-ic svg { width: 22px; height: 22px; } .orb-ad { font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; text-align: center; color: #334155; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid #e8edf3; border-radius: 9px; padding: 3px 9px; transition: color 0.2s ease, border-color 0.2s ease; } .orb-aciklama { display: none; } a.orb-dugum { cursor: pointer; } a.orb-dugum:hover .orb-ic, a.orb-dugum:focus-visible .orb-ic { transform: scale(1.14); box-shadow: 0 16px 34px -14px rgba(var(--hm-c), 0.55); } a.orb-dugum:hover .orb-ad, a.orb-dugum:focus-visible .orb-ad { color: #0f172a; border-color: rgba(var(--hm-c), 0.4); } a.orb-dugum:focus-visible { outline: none; } a.orb-dugum:focus-visible .orb-ic { box-shadow: 0 0 0 4px rgba(var(--hm-c), 0.28); } /* ---------- Aktif sayfa vurgusu ---------- */ body[data-hero-current='kelebek'] .orb-dugum[data-hero-nav='kelebek'] .orb-ic, body[data-hero-current='dersprogrami'] .orb-dugum[data-hero-nav='dersprogrami'] .orb-ic, body[data-hero-current='sorumluluk'] .orb-dugum[data-hero-nav='sorumluluk'] .orb-ic, body[data-hero-current='whatsapp'] .orb-dugum[data-hero-nav='whatsapp'] .orb-ic, body[data-hero-current='ogrenci'] .orb-dugum[data-hero-nav='ogrenci'] .orb-ic, body[data-hero-current='ogretmen'] .orb-dugum[data-hero-nav='ogretmen'] .orb-ic, body[data-hero-current='eokul'] .orb-dugum[data-hero-nav='eokul'] .orb-ic { background: rgb(var(--hm-c)); color: #ffffff; box-shadow: 0 0 0 5px rgba(var(--hm-c), 0.18), 0 14px 30px -14px rgba(var(--hm-c), 0.55); } body[data-hero-current='kelebek'] .orb-dugum[data-hero-nav='kelebek'] .orb-ad, body[data-hero-current='dersprogrami'] .orb-dugum[data-hero-nav='dersprogrami'] .orb-ad, body[data-hero-current='sorumluluk'] .orb-dugum[data-hero-nav='sorumluluk'] .orb-ad, body[data-hero-current='whatsapp'] .orb-dugum[data-hero-nav='whatsapp'] .orb-ad, body[data-hero-current='ogrenci'] .orb-dugum[data-hero-nav='ogrenci'] .orb-ad, body[data-hero-current='ogretmen'] .orb-dugum[data-hero-nav='ogretmen'] .orb-ad, body[data-hero-current='eokul'] .orb-dugum[data-hero-nav='eokul'] .orb-ad { color: #0f172a; border-color: rgba(var(--hm-c), 0.45); } /* ---------- Dar ekran: premium liste ---------- */ @media (max-width: 640px) { .orb { aspect-ratio: auto; max-width: 100%; transform: none; } .orb-logo { margin-top: 0; margin-bottom: 0; } .orb-hub-varsayilan .orb-hub-marka, .orb-hub-varsayilan .orb-hub-alt { transform: none; } .orb-cizgiler { display: none; } .orb-hub { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 16px; margin-bottom: 12px; padding: 16px 14px; animation: none; background: #ffffff; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -22px rgba(15, 23, 42, 0.25); } .orb-hub::after { display: none; } .orb-hub-halka { display: none; } .orb-hub-varsayilan, .orb-hub-detay { position: static; padding: 0; } .orb-hub-detay { display: none; } .orb-dugum { position: static; transform: none; width: 100%; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; background: #ffffff; border: 1px solid #e8edf3; border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; animation: none; } .orb-ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px; animation: none; } .orb-ad { grid-column: 2; text-align: left; background: none; border: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.86rem; color: #0f172a; } .orb-aciklama { display: block; grid-column: 2; font-size: 0.72rem; line-height: 1.35; color: #64748b; } } /* ---------- Hareket azaltma ---------- */ @media (prefers-reduced-motion: reduce) { .orb-hat, .orb-hub, .orb-hub-halka, .orb-dugum, .orb-ic { animation: none; } .orb-hat, .orb-ic, .orb-ad, .orb-hub-varsayilan, .orb-hub-detay { transition: none; } }