/* Hipnoter Akademie — Seans Asistanı
   Mor/indigo derinlik + marka altını. Tam sayfa, tek soru akışı. */

:root {
  --violet:      #6D5BD0;
  --violet-deep: #4B3FA7;
  --violet-ink:  #241E4E;
  --gold:        #F2A93B;
  --gold-deep:   #D98A14;
  --teal:        #21C0A8;
  --pink:        #E86A9B;

  --ink:    #1B1836;
  --body:   #3D3A5C;
  --muted:  #6F6B90;
  --faint:  #9A97B4;

  --bg:     #F6F5FC;
  --surface:#FFFFFF;
  --line:   #E6E3F2;
  --line-2: #D5D1E8;

  --ok:     #17A87F;
  --danger: #E05252;

  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --sh:    0 2px 10px rgba(36, 30, 78, .06);
  --sh-lg: 0 24px 60px -22px rgba(36, 30, 78, .34);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--body);
  font: 400 16px/1.6 "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 750; letter-spacing: -.022em; line-height: 1.2; color: var(--ink); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Arka plan ─────────────────────────────────────────── */

.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5;
                animation: drift 30s var(--ease) infinite alternate; }
.b1 { width: 46vw; height: 46vw; left: -12vw; top: -16vw; background: #8E7BF0; }
.b2 { width: 40vw; height: 40vw; right: -12vw; top: 12vh; background: #F5C06A; opacity: .42; animation-delay: -10s; }
.b3 { width: 50vw; height: 50vw; left: 30vw; bottom: -28vw; background: #6FE3D0; opacity: .35; animation-delay: -19s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,5vh,0) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .aurora .blob { animation: none; } }

.glass {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
}

/* ── Giriş ─────────────────────────────────────────────── */

.login { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: 100%; max-width: 440px; padding: 38px 34px 30px; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
              animation: rise .5s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.login-logo { display: block; width: 250px; max-width: 100%; margin: 0 auto 22px; }
.login-card h1 { font-size: 24px; text-align: center; }
.sub { text-align: center; color: var(--muted); font-size: 14.5px; margin: 8px 0 26px; }

/* ── Form öğeleri ──────────────────────────────────────── */

.field { display: block; margin-bottom: 20px; }
.field > span:first-child {
  display: block; font-size: 11.5px; font-weight: 750; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 9px;
}
.field-note { display: block; font-size: 12.5px; color: var(--faint); margin-top: 8px;
              text-transform: none; letter-spacing: 0; font-weight: 500; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea {
  width: 100%; padding: 15px 17px;
  background: #F5F3FC;
  border: 1.5px solid transparent; border-radius: 15px; outline: none;
  color: var(--ink); font-weight: 500;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .22s var(--ease), transform .16s var(--spring);
}
textarea { resize: vertical; min-height: 108px; line-height: 1.75; }

input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  background: #EFECFA;
}
input:focus, select:focus, textarea:focus {
  background: #fff; border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(109,91,208,.15), 0 8px 22px -12px rgba(75,63,167,.55);
  transform: translateY(-1px);
}
input::placeholder, textarea::placeholder { color: #A9A5C4; font-weight: 400; }

/* sayı okları gizli — hiçbir alanda gerekmiyor */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* özel açılır liste oku */
select {
  appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236F6B90' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236D5BD0' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* sihirbazdaki büyük alanlar */
.input-xl {
  padding: 20px 22px !important; font-size: 20px !important; font-weight: 550 !important;
  border-radius: 18px !important;
}
.input-xl::placeholder { font-size: 18px; }

/* ── Yüzen etiketli alan (modal formları) ──────────────── */

.fl { position: relative; display: block; margin-bottom: 18px; }
.fl > input, .fl > select, .fl > textarea {
  padding: 24px 17px 10px;             /* etiket için üstte yer */
}
.fl > span {
  position: absolute; left: 18px; top: 17px; pointer-events: none;
  font-size: 15px; font-weight: 500; color: var(--muted);
  transform-origin: left top;
  transition: transform .18s var(--ease), color .18s var(--ease), opacity .18s;
}
.fl > input:focus ~ span,
.fl > input:not(:placeholder-shown) ~ span,
.fl > textarea:focus ~ span,
.fl > textarea:not(:placeholder-shown) ~ span,
.fl > select ~ span {
  transform: translateY(-11px) scale(.76);
  color: var(--violet);
  font-weight: 700; letter-spacing: .04em;
}
.fl > input:not(:focus):not(:placeholder-shown) ~ span,
.fl > textarea:not(:focus):not(:placeholder-shown) ~ span,
.fl > select:not(:focus) ~ span { color: var(--faint); }
/* yer tutucu yalnızca odaktayken görünsün — etiketle çakışmasın */
.fl > input::placeholder, .fl > textarea::placeholder { opacity: 0; transition: opacity .18s; }
.fl > input:focus::placeholder, .fl > textarea:focus::placeholder { opacity: 1; }
.fl .field-note { margin-top: 7px; }

.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 86px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  transition: all .16s var(--ease); }
.pw-toggle:hover { color: var(--violet-deep); border-color: var(--violet); }

.form-error { color: #8E2B2B; background: #FDECEC; border: 1px solid #F6C9C9;
  padding: 11px 13px; border-radius: 12px; font-size: 13.5px; margin-bottom: 14px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Butonlar ──────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1.5px solid transparent; border-radius: 13px;
  font-size: 15px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--spring), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 28px; font-size: 16.5px; border-radius: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }

.btn-primary { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); color: #fff;
               box-shadow: 0 8px 22px -8px rgba(75,63,167,.6); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 14px 32px -10px rgba(75,63,167,.7); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #40290A;
            box-shadow: 0 8px 22px -8px rgba(217,138,20,.6); }
.btn-gold:hover:not(:disabled) { box-shadow: 0 14px 32px -10px rgba(217,138,20,.72); }
.btn-soft { background: #F1EFFB; border-color: #E1DCF6; color: var(--violet-deep); }
.btn-soft:hover:not(:disabled) { background: #E8E4F9; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--violet-deep); border-color: var(--violet); background: #F7F5FD; }
.btn-danger { background: #FDECEC; border-color: #F5C7C7; color: #B33A3A; }
.btn-danger:hover:not(:disabled) { background: #FADFDF; }

.icon-btn { background: #fff; border: 1.5px solid var(--line-2); color: var(--muted);
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--violet-deep); border-color: var(--violet); }

/* ── Üst çubuk ─────────────────────────────────────────── */

.app { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; }
.topnav {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px;
  padding: 12px 26px; background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.topnav-logo { height: 34px; width: auto; cursor: pointer; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  padding: 9px 16px; background: none; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 14.5px; font-weight: 620; color: var(--muted);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tab:hover { background: #F1EFFB; color: var(--violet-deep); }
.tab.active { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); color: #fff; }
.topnav-end { display: flex; align-items: center; gap: 12px; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
          box-shadow: 0 0 0 3px rgba(23,168,127,.18); }
.ai-dot.off { background: var(--faint); box-shadow: 0 0 0 3px rgba(154,151,180,.18); }
.who {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 620; color: var(--body);
}
.who:hover { border-color: var(--violet); }
.who .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
           font-size: 11.5px; font-weight: 750; color: #fff;
           background: linear-gradient(140deg, var(--violet), var(--violet-deep)); }

.view { flex: 1; padding: 32px 26px 70px; }
.wrap { max-width: 980px; margin: 0 auto; }
.wrap-narrow { max-width: 720px; margin: 0 auto; }

@media (max-width: 760px) {
  .topnav { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .topnav-logo { height: 28px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .view { padding: 22px 14px 60px; }
  .who span:not(.av) { display: none; }
}

/* ── Sihirbaz (tam sayfa, tek soru) ────────────────────── */

.wiz { max-width: 780px; margin: 0 auto; }

.wiz-bar { margin-bottom: 34px; }
.wiz-track { height: 6px; border-radius: 999px; background: #E7E4F5; overflow: hidden; }
.wiz-track span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transition: width .45s var(--ease); }
.wiz-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wiz-step { font-size: 13px; font-weight: 700; color: var(--violet-deep); letter-spacing: .02em; }
.wiz-phase {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; background: #FCF3E2; border: 1px solid #F0DCB4; color: #8A6212;
}

/* Animasyon yalnızca gerçekten adım değişince oynar (in-fwd / in-back).
   Aynı adım yeniden çizilirken hiçbir animasyon yok — ekran "yeniden açılmaz". */
.wiz-card.in-fwd  { animation: stepIn .3s var(--ease) both; }
.wiz-card.in-back { animation: stepBack .3s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* yeni konu ekleme */
.pick-add { border-style: dashed; background: transparent; }
.pick-add:hover { border-color: var(--gold); background: #FFFBF3; }
.pick-tag { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 750;
            letter-spacing: .04em; color: var(--gold-deep); }
.pick.on .pick-tag { color: var(--violet-deep); }
.newtopic { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
            animation: stepIn .26s var(--ease) both; }
.newtopic input { flex: 1; min-width: 240px; }
.newtopic-note { font-size: 13px; color: var(--faint); margin-top: 10px; line-height: 1.6; }

.wiz-q { font-size: clamp(27px, 4.4vw, 40px); line-height: 1.18; margin-bottom: 12px; }
.wiz-help { font-size: 16px; color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
.wiz-field { margin-bottom: 26px; }
.wiz-label { display: block; font-size: 13.5px; font-weight: 680; color: var(--muted); margin-bottom: 9px; }

.wiz-nav { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.wiz-nav .spacer { flex: 1; }
.wiz-hint { font-size: 13px; color: var(--faint); }

/* seçim kartları */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pick {
  position: relative; display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 18px 18px 16px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  transition: transform .16s var(--spring), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pick:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sh); }
.pick .ico { font-size: 26px; line-height: 1; }
.pick b { font-size: 16px; color: var(--ink); }
.pick span.d { font-size: 13px; color: var(--muted); line-height: 1.5; }
.pick.on {
  border-color: var(--violet); background: linear-gradient(160deg, #F6F3FF, #FFFFFF);
  box-shadow: 0 12px 28px -14px rgba(75,63,167,.5);
}
.pick.on::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
}

/* etiket girişi */
.taginput { display: flex; gap: 9px; }
.taginput input { flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  animation: pop .28s var(--spring) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.tag button { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.75);
              font-size: 14px; padding: 0; line-height: 1; }
.tag button:hover { color: #fff; }
.sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sug {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  background: #fff; border: 1.5px dashed var(--line-2); color: var(--muted);
  transition: all .16s var(--ease);
}
.sug:hover { border-style: solid; border-color: var(--violet); color: var(--violet-deep); background: #F7F5FD; }
.sug.used { opacity: .35; pointer-events: none; }

/* özet ekranı */
.review { display: grid; gap: 10px; }
.rev-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.rev-row .k { flex: 0 0 170px; font-size: 13.5px; color: var(--muted); font-weight: 620; }
.rev-row .v { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
.rev-row .v em { color: var(--faint); font-style: normal; }
@media (max-width: 620px) { .rev-row { flex-direction: column; gap: 4px; } .rev-row .k { flex: none; } }

/* ── Kartlar / listeler ────────────────────────────────── */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.card-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card-head h3 { flex: 1; font-size: 16.5px; }
.card-body { padding: 20px 22px; }
.card-body.tight { padding: 10px; }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.tile {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; transition: transform .16s var(--spring), border-color .18s, box-shadow .18s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--sh); }
.tile .info { flex: 1; min-width: 0; }
.tile .t { font-size: 15.5px; font-weight: 680; color: var(--ink); }
.tile .s { font-size: 13px; color: var(--muted); margin-top: 3px; }
.tile .end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.av-lg { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
         font-size: 15px; font-weight: 750; color: #fff;
         background: linear-gradient(140deg, var(--violet), var(--violet-deep)); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
        font-size: 12px; font-weight: 680; background: #F1EFFB; border: 1px solid #E1DCF6; color: var(--violet-deep); }
.pill.gold  { background: #FCF3E2; border-color: #F0DCB4; color: #8A6212; }
.pill.green { background: #E4F7F1; border-color: #B9E9DC; color: #12836A; }
.pill.grey  { background: #F2F1F7; border-color: var(--line-2); color: var(--muted); }
.pill.red   { background: #FDECEC; border-color: #F5C7C7; color: #B33A3A; }

/* ── Aşamalar ──────────────────────────────────────────── */

.phase { background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
         margin-bottom: 14px; overflow: hidden; box-shadow: var(--sh); }
.phase-head { display: flex; align-items: center; gap: 15px; padding: 18px 20px; cursor: pointer;
              transition: background .16s var(--ease); }
.phase-head:hover { background: #FAF9FE; }
.phase.open .phase-head { background: linear-gradient(120deg, #F4F1FE, #FFFFFF); border-bottom: 1px solid var(--line); }
.phase-no { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
            font-size: 21px; background: #F1EFFB; border: 1px solid #E4E0F5; }
.phase.open .phase-no { background: linear-gradient(140deg, var(--violet), var(--violet-deep)); }
.phase-title { flex: 1; min-width: 0; }
.phase-title b { display: block; font-size: 16.5px; color: var(--ink); }
.phase-title span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.phase-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.caret { color: var(--faint); font-size: 13px; transition: transform .24s var(--spring); }
.phase.open .caret { transform: rotate(90deg); }
.phase-body { padding: 6px 20px 20px; }
.phase-desc { font-size: 14px; color: var(--muted); line-height: 1.7; padding: 14px 16px; margin: 12px 0 16px;
              background: #F8F7FD; border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0; }
.phase-plan { font-size: 14.5px; line-height: 1.7; color: #6B5312; padding: 14px 16px; margin: 12px 0 16px;
              background: #FDF7EA; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; }

/* telkin adımı */
.step { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; background: #fff; }
.step-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: #FBFAFE;
             border-bottom: 1px solid var(--line); cursor: pointer; }
.step-no { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center;
           font-size: 12.5px; font-weight: 750; background: var(--violet); color: #fff; }
.step.locked .step-no { background: var(--violet-ink); }
.step.free .step-no { background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #40290A; }
.step-head h4 { flex: 1; font-size: 15px; }
.step-body { padding: 18px 20px; }
.step-text { white-space: pre-wrap; line-height: 1.9; font-size: 17px; color: #262244;
             font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
.step-hint { margin-top: 14px; font-size: 13px; color: var(--faint); font-style: italic; }
.step-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.mode-tag { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.mode-sabit { color: var(--violet-ink); }
.mode-slot { color: var(--violet); }
.mode-serbest { color: var(--gold-deep); }

/* plan onay */
.plan-hero { padding: 26px 28px; border-radius: var(--r-lg); margin-bottom: 20px;
             background: linear-gradient(140deg, #FDF6E9, #FFFDF8); border: 1px solid #F0DCB4; }
.plan-hero h3 { font-size: 20px; color: #7C5B10; margin-bottom: 10px; }
.plan-hero p { font-size: 16px; line-height: 1.75; color: #6B5312; }
.plan-item { display: flex; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.plan-item:last-child { border-bottom: 0; }
.plan-item .no { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
                 font-size: 19px; background: #F1EFFB; border: 1px solid #E4E0F5; }
.plan-item .txt { flex: 1; min-width: 0; }
.plan-item .txt b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.plan-item .txt p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

/* ── Sunum modu ────────────────────────────────────────── */

.present { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; color: #EFECFA;
  background: radial-gradient(1100px 700px at 50% -10%, #3B3178, #14112B 70%); animation: fadein .3s var(--ease) both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ps-top { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.13); }
.ps-top b { flex: 1; font-size: 16px; color: #fff; }
.ps-count { font-size: 14px; color: #A9A2D0; font-variant-numeric: tabular-nums; }
.ps-frame { flex: 1; overflow-y: auto; padding: 46px 30px; display: flex; justify-content: center; }
.ps-slide { max-width: 860px; width: 100%; animation: stepIn .4s var(--spring) both; }
.ps-slide h3 { font-size: 15px; color: var(--gold); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 22px; }
.ps-slide .body { white-space: pre-wrap; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.85;
                  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; color: #EFECFA; }
.ps-hud { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.ps-btn { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.1);
          border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 22px; display: grid; place-items: center;
          transition: background .18s var(--ease); }
.ps-btn:hover { background: rgba(255,255,255,.22); }
.ps-progress { height: 4px; background: rgba(255,255,255,.12); }
.ps-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--gold));
                    transition: width .35s var(--ease); }

/* ── Modal ─────────────────────────────────────────────── */

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(27,24,54,.46);
  backdrop-filter: blur(4px); display: grid; place-items: center; padding: 22px; overflow-y: auto;
  animation: fadein .2s var(--ease) both; }
.modal { width: 100%; max-width: 620px; max-height: calc(100dvh - 44px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg); animation: rise .26s var(--spring) both; }
.modal.wide { max-width: 880px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.modal-head h3 { flex: 1; font-size: 18px; }
.modal-body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--line); }
.modal-foot .spacer { flex: 1; }

/* ── Diğer ─────────────────────────────────────────────── */

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .ico { font-size: 44px; opacity: .45; margin-bottom: 12px; }
.empty h4 { font-size: 19px; margin-bottom: 7px; }
.empty p { font-size: 15px; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: flex; flex-direction: column; gap: 9px; }
.toast { padding: 14px 18px; border-radius: 14px; background: var(--violet-ink); color: #F2EFFC;
  box-shadow: var(--sh-lg); font-size: 14.5px; max-width: 360px; animation: slide .3s var(--spring) both; }
.toast.err { background: #8E2B2B; }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.notice { padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.65;
          background: #FDF7EA; border: 1px solid #F0DCB4; color: #7C5B10; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hstack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 16px; }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
        border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-soft .spin, .btn-ghost .spin { border-color: rgba(109,91,208,.3); border-top-color: var(--violet); }
@keyframes spin { to { transform: rotate(360deg); } }

.intake-summary { display: grid; grid-template-columns: 165px 1fr; gap: 10px 18px; font-size: 15px; }
.intake-summary dt { color: var(--muted); font-size: 13.5px; }
.intake-summary dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .intake-summary { grid-template-columns: 1fr; gap: 2px 0; } .intake-summary dd { margin-bottom: 10px; } }