/* ======================================================================
   İşbirliği: mesaj bir takımyıldızı olur. Hakkımda'nın sonundaki gece bu sayfada devam eder; gök ve balina canvas
   (collab.js), yazılar onun üstünde. Kart ve kutu yok: sorular gökte duran satırlar, tek vurgu ana renk.
   Betik yoksa is-steps gelmez: bütün sorular alt alta düz form olur.
   ====================================================================== */
.sg { --night: #071634; --line-n: rgba(234, 242, 250, .2); --amber: #ffb36b; background: linear-gradient(#071634, #0c2a5c 70%, #14497f); color: #eaf2fa; }
.uzay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sg main, .sg .foot, .sg .case-foot { position: relative; z-index: 1; }
.sg .top--solid { background: #0a1a38; color: #9fb0c2; box-shadow: 0 0 0 1px var(--line-n); }
.sg .top--solid b, .sg .top--solid nav { color: #eaf2fa; }
.sg .top--solid nav a:hover { background: #1a2c50; }
.sg .top--solid nav a[aria-current="page"] { background: #eaf2fa; color: #0a1a38; }
.sg .top--solid .menu { background: #eaf2fa; color: #0a1a38; }
.sg :focus-visible { outline-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* İlk ekran tek parça: solda başlık ve sıradaki soru, sağda gök. Kısa ekranda da kaydırmadan seçim yapılabilsin diye başlık ölçülü. */
.brief { padding: clamp(88px, 13vh, 118px) var(--pad) clamp(50px, 7vw, 100px); scroll-margin-top: 80px; }
.brief__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }
.ask-wrap { grid-column: 1 / 8; min-width: 0; }
.sg .phead { padding: 0; }
.sg .phead .ptitle { font-weight: 500; font-stretch: 75%; font-size: clamp(46px, min(6.6vw, 11.5vh), 124px); line-height: .95; letter-spacing: -0.02em; color: #fff; }
.sg .phead__say { margin-top: clamp(6px, 1.2vh, 12px); font: 400 clamp(16px, 1.35vw, 20px)/1.35 "Inter", sans-serif; color: #cddaea; }
.brief__trap { position: absolute; left: -9999px; }

.ask__top { display: none; align-items: center; gap: 16px; min-height: 30px; margin-top: clamp(10px, 2.4vh, 26px); color: #b7c6d9; }
.brief.is-steps .ask__top { display: flex; }
.ask__back { padding: 4px 0; color: #fff; font: inherit; background: none; border: 0; cursor: pointer; }
.ask__back:hover { color: var(--amber); }
.ask__step { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.ask__step legend { padding: 0; font: 500 clamp(28px, min(3vw, 5.4vh), 46px)/1.04 "Bricolage", sans-serif; font-stretch: 80%; letter-spacing: -0.02em; color: #fff; }
.brief.is-steps .ask__step { display: none; margin: 2px 0 0; }
.brief.is-steps .ask__step.on { display: block; animation: rise .55s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.ask__not { margin: 8px 0 0; color: #b7c6d9; font-size: 14.5px; }
.ask__grup { margin: clamp(12px, 2.4vh, 22px) 0 0; color: #fff; font: 600 15px/1.3 "Inter", sans-serif; }

/* Alan seçimi: kutu dizisi değil, gökte duran bir dizin. Satır üzerine gelince ok çıkar ve ad ana renge döner. */
.opts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(12px, 2.2vh, 22px); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt > span { display: block; height: 100%; padding: 11px 18px; color: #fff; font: 600 clamp(15px, 1.2vw, 17px)/1.25 "Inter", sans-serif; background: rgba(7, 22, 52, .45); border: 1px solid rgba(234, 242, 250, .34); border-radius: 99px; transition: background .25s, color .25s, border-color .25s, transform .4s var(--spring); }
.opt:hover > span { border-color: var(--amber); transform: translateY(-2px); }
.opt input:checked + span { color: #121110; background: var(--hot); border-color: var(--hot); }
.opt input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.opt[hidden] { display: none; }
.opts--kucuk { gap: 7px; margin-top: 8px; }
.opts--kucuk .opt > span { padding: 7px 13px; font-size: 14px; font-weight: 500; }

/* İlk soru tıklanacağı baştan belli olan düğmeler (Meyrem: satır listesine tıklanacağı anlaşılmıyordu): dolgulu zemin ve hep görünen ok. */
.opts--satir { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.2vh, 10px); margin-top: clamp(8px, 1.4vh, 14px); }
.opts--satir .opt:last-child { grid-column: 1 / -1; }
.opts--satir .opt > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(7px, 1.35vh, 13px) 12px clamp(7px, 1.35vh, 13px) 16px; background: rgba(234, 242, 250, .08); border: 1px solid rgba(234, 242, 250, .3); border-radius: 14px; }
.opt__yazi { display: block; min-width: 0; }
.opt__yazi b { display: block; font: 600 clamp(19px, min(1.7vw, 3.2vh), 26px)/1.1 "Bricolage", sans-serif; font-stretch: 84%; letter-spacing: -0.012em; }
.opt__yazi small { display: block; margin-top: 2px; color: #c3d1e2; font: 400 clamp(12.5px, .95vw, 14px)/1.28 "Inter", sans-serif; }
.opt__ok { display: grid; flex: none; place-items: center; width: 34px; height: 34px; color: var(--hot); font-style: normal; font-weight: 600; border: 1.5px solid var(--hot); border-radius: 50%; transition: background .2s, color .2s, transform .35s var(--ease); }
.opts--satir .opt:hover > span { background: rgba(234, 242, 250, .15); border-color: #fff; }
.opts--satir .opt:hover .opt__ok, .opts--satir .opt input:checked + span .opt__ok { color: #121110; background: var(--hot); transform: translateX(2px); }
.opts--satir .opt input:checked + span { color: #fff; background: rgba(234, 242, 250, .15); border-color: var(--hot); }
.opts--satir .opt input:focus-visible + span { outline-offset: 2px; }

.ask__yazi { display: block; margin-top: 16px; }
.ask__yazi textarea, .ask__field input, .ask__gun input { width: 100%; color: #fff; font: 400 17px/1.45 "Inter", sans-serif; background: rgba(7, 22, 52, .45); border: 1px solid rgba(234, 242, 250, .34); border-radius: 10px; transition: border-color .2s; }
.ask__yazi textarea { display: block; min-height: clamp(110px, 24vh, 190px); padding: 14px 16px; resize: vertical; }
.ask__yazi textarea::placeholder { color: #93a7bf; }
.ask__yazi textarea:focus, .ask__field input:focus, .ask__gun input:focus { border-color: #fff; outline: 0; }
[aria-invalid="true"] { border-color: var(--hot) !important; }
.ask__gun { display: inline-flex; align-items: center; gap: 9px; color: #cddaea; font-size: 14px; }
.ask__gun input { width: auto; padding: 5px 10px; font-size: 14px; color-scheme: dark; }

.ask__next { display: none; margin-top: 16px; padding: 11px 20px; color: #fff; font: 600 15.5px "Inter", sans-serif; background: none; border: 1px solid #fff; border-radius: 99px; cursor: pointer; transition: background .2s, color .2s; }
.ask__next:hover { color: var(--night); background: #fff; }
.brief.is-steps .ask__next { display: inline-block; }
.brief.is-steps .ask__next[hidden] { display: none; }

.ask__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.ask__field { display: grid; gap: 6px; min-width: 0; color: #cddaea; font-size: 14.5px; }
.ask__field input { padding: 12px 15px; }
.ask__field em { color: #93a7bf; font-style: normal; }
/* Tarayıcının kayıtlı adresle doldurduğu alan beyaza dönmesin. */
.ask__field input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: inset 0 0 0 40px #0a1f47; }
.brief__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 18px; }
/* Onay kutusu değil, bilgi: aydınlatma bir onaya bağlanamaz (KVK Kurulu ilke kararı, 18.02.2026, 2026/347). */
.brief__ok { flex: 1 1 260px; color: #cddaea; font-size: 13.5px; line-height: 1.45; }
.brief__ok a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.brief__ok a:hover { color: var(--amber); }
.brief__send { display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; color: #121110; font: 600 clamp(19px, 1.7vw, 24px)/1 "Bricolage", sans-serif; font-stretch: 84%; background: var(--hot); border: 0; border-radius: 99px; cursor: pointer; transition: transform .4s var(--spring), background .25s; }
.brief__send i { font-style: normal; transition: transform .4s var(--ease); }
.brief__send:hover { background: #ff6a3f; transform: translateY(-3px); }
.brief__send:hover i { transform: translateX(6px); }
.brief__send[disabled] { opacity: .7; cursor: progress; }
.brief__err { width: fit-content; max-width: 100%; margin-top: 14px; padding: 9px 13px; color: var(--night); font-size: 14.5px; background: #fff; border-radius: 8px; }
.brief__err a { text-decoration: underline; }
.brief__big { margin-top: clamp(20px, 5vh, 50px); font: 500 clamp(46px, 6.4vw, 110px)/.96 "Bricolage", sans-serif; font-stretch: 75%; letter-spacing: -0.02em; color: #fff; }
.brief__done > p:not(.brief__big) { max-width: 30em; margin-top: 16px; font-size: 18px; }
.brief__done > p a { text-decoration: underline; }
.brief__done:focus { outline: 0; }
.brief__sonra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(20px, 4vh, 34px); }
.brief__yeni { padding: 15px 26px; color: #121110; font: 600 clamp(18px, 1.5vw, 22px)/1 "Bricolage", sans-serif; font-stretch: 84%; background: var(--hot); border: 0; border-radius: 99px; cursor: pointer; transition: transform .4s var(--spring), background .25s; }
.brief__yeni:hover { background: #ff6a3f; transform: translateY(-3px); }
.brief__git { color: #fff; font-weight: 600; border-bottom: 1px solid currentColor; }
.brief__git:hover { color: var(--amber); }

/* Sağ sütun: balina canvas'ta bu kutuya oturur; altında mesajın bana ulaşacak hâli, kutusuz bir yıldız kataloğu gibi. */
.gok { display: none; grid-column: 8 / 13; min-width: 0; }
.brief.is-steps .gok { position: sticky; top: 92px; display: grid; gap: 4px; }
.gok__balina { aspect-ratio: 1000 / 560; }
.gok__yazi { margin: 0 0 10px; color: #a9bbd0; font-size: 13px; line-height: 1.4; }
.gok__yazi[hidden] { display: none; }
/* Mesajın özeti gökte kaybolmasın: koyu zeminli, çerçeveli panel; değerler beyaz ve okunaklı (Meyrem: "daha belirgin olabilir"). */
.kayit { padding: 12px 16px 13px; background: rgba(5, 16, 40, .72); border: 1px solid rgba(234, 242, 250, .3); border-radius: 14px; }
.kayit__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 7px; padding-bottom: 7px; color: #fff; font: 600 15px/1.3 "Inter", sans-serif; border-bottom: 1px solid var(--line-n); }
.kayit__bas .mono { color: var(--amber); font-size: 12.5px; font-weight: 400; }
.kayit dl, #kayit { margin: 0; }
#kayit > div { display: grid; grid-template-columns: 70px 1fr; align-items: baseline; gap: 10px; padding: 2px 0; animation: rise .35s var(--ease); }
#kayit dt { color: var(--amber); font: 400 12.5px/1.45 "JetBrains Mono", "Mono", monospace; }
#kayit dd { display: -webkit-box; margin: 0; overflow: hidden; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#kayit .kayit__bos { display: block; color: #b7c6d9; font-size: 14.5px; }
.kayit__is { margin: 8px 0 0; font-size: 13.5px; }
.kayit__is a { color: var(--amber); }
.kayit__is a:hover { text-decoration: underline; }

/* ---------- Sonrası ve sorular ----------------------------------------- */
.after { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; padding: clamp(50px, 7vw, 100px) var(--pad); background: rgba(7, 22, 52, .82); }
.sg .eyebrow { color: #cddaea; }
.after__steps { grid-column: 1 / 6; }
.after__steps ol { margin-top: 26px; list-style: none; }
.after__steps ol[hidden], .after__faq [hidden], .after__faq[hidden] { display: none; }
.after__steps li { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--line-n); }
.after__steps li .mono { padding-top: 4px; color: var(--amber); }
.after__faq { grid-column: 7 / 13; }
.qa:first-of-type { margin-top: 26px; }
.qa { border-top: 1px solid var(--line-n); }
.qa:last-child { border-bottom: 1px solid var(--line-n); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; font: 600 clamp(19px, 1.7vw, 25px)/1.2 "Bricolage", sans-serif; font-stretch: 86%; list-style: none; cursor: pointer; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--amber); }
.qa summary i { position: relative; flex: none; width: 18px; height: 18px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: none; }
.qa p { padding-bottom: 18px; color: #cddaea; }

/* ---------- Aydınlatma metni ------------------------------------------- */
.metin { max-width: 720px; padding: 120px var(--pad) 80px; }
.metin h1 { margin: 8px 0 14px; font: 500 clamp(44px, 6vw, 84px)/.96 "Bricolage", sans-serif; font-stretch: 75%; letter-spacing: -0.02em; color: #fff; }
.metin h2 { margin: 28px 0 6px; font: 600 clamp(20px, 1.8vw, 25px)/1.15 "Bricolage", sans-serif; font-stretch: 84%; color: #fff; }
.metin p { margin: 0; color: #cddaea; font-size: 16px; line-height: 1.55; }
.metin p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.metin .metin__on { color: #fff; font-size: 19px; line-height: 1.45; }
.metin .metin__tarih { margin: 30px 0 18px; color: #93a7bf; }
.metin ul { margin: 8px 0 0; padding-left: 20px; color: #cddaea; font-size: 16px; line-height: 1.55; }
.metin li + li { margin-top: 4px; }
.metin li::marker { color: var(--hot); }
.metin li b, .metin dt { color: #fff; font-weight: 600; }
.metin li a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.metin p + p, .metin p + ul, .metin ul + p { margin-top: 10px; }
.metin dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin-top: 8px; color: #cddaea; font-size: 16px; }
.metin dd a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .brief { padding-top: 92px; }
  .brief__grid { display: flex; flex-direction: column; gap: 14px; }
  .ask-wrap { display: contents; }
  .sg .phead, .brief__form, .brief__done, .gok__balina, .kayit { width: 100%; }
  .sg .phead { order: 1; }
  .brief.is-steps .gok { display: contents; }
  .gok__balina { order: 2; margin-top: 2px; }
  .gok__yazi { order: 3; margin: 0; }
  .brief__form, .brief__done { order: 4; }
  .kayit { order: 5; margin-top: 18px; }
  .opts--satir { grid-template-columns: 1fr; }
  .opts--satir .opt > span { padding-block: 10px; }
  .ask__fields { grid-template-columns: 1fr; }
  .brief__send { justify-content: center; width: 100%; }
  .after__steps, .after__faq { grid-column: 1 / -1; }
  .after__faq { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .brief.is-steps .ask__step.on, #kayit > div { animation: none; }
}