/* ==========================================================================
   ZEON ACADEMY — components.css
   nav · düymələr · kartlar · akkordeon · kursor · modal · təqvim · bildiriş
   ========================================================================== */

/* ---------- 1. Fərdi kursor --------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on * { cursor: none !important; }
}
.cursor-dot, .cursor {
  position: fixed; top: 0; left: 0; z-index: 9000;
  pointer-events: none; border-radius: 50%; opacity: 0;
  will-change: transform; transition: opacity .25s var(--e);
}
body.cursor-ready .cursor-dot, body.cursor-ready .cursor { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--brand-500); }
.cursor {
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: 1.5px solid rgba(15,98,254,.5);
  background: rgba(15,98,254,.05);
  display: grid; place-items: center;
  transition: width .28s cubic-bezier(.34,1.4,.64,1), height .28s cubic-bezier(.34,1.4,.64,1),
              margin .28s cubic-bezier(.34,1.4,.64,1), background .24s, border-color .24s,
              border-radius .28s, opacity .25s;
}
.cursor__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; opacity: 0; transform: scale(.6); white-space: nowrap;
  transition: opacity .2s var(--e), transform .26s cubic-bezier(.34,1.4,.64,1);
}
body.cur-link  .cursor { width: 50px; height: 50px; margin: -25px 0 0 -25px; background: rgba(15,98,254,.1); }
body.cur-btn   .cursor { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(15,98,254,.16); border-color: transparent; }
body.cur-label .cursor { width: 80px; height: 80px; margin: -40px 0 0 -40px; background: var(--brand-500); border-color: transparent; box-shadow: var(--sh-brand); }
body.cur-label .cursor__label { opacity: 1; transform: scale(1); }
body.cur-text  .cursor { width: 2px; height: 26px; margin: -13px 0 0 -1px; border-radius: 2px; background: var(--brand-700); border-color: transparent; }
body.cur-link .cursor-dot, body.cur-btn .cursor-dot,
body.cur-label .cursor-dot, body.cur-text .cursor-dot { opacity: 0; }
body.cur-down .cursor { transform: scale(.85); }
.cursor-ring {
  position: fixed; z-index: 8999; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid var(--brand-500); border-radius: 50%;
  pointer-events: none; animation: ripple .5s var(--e) forwards;
}

/* ---------- 2. Preloader ------------------------------------------------ */
.preload {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  background: var(--white);
  transition: opacity .45s var(--e), visibility .45s;
}
.preload.done { opacity: 0; visibility: hidden; }
.preload__in { display: grid; justify-items: center; gap: 24px; }
.preload__mark {
  width: 132px; height: auto;
  animation: preloadIn .7s var(--e) both, float 2.6s ease-in-out .7s infinite;
}
@keyframes preloadIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.preload__bar { position: relative; width: 132px; height: 3px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.preload__bar::after { content: ''; position: absolute; inset: 0; background: var(--brand-grad); animation: sweep 1.05s var(--e) infinite; }

/* ---------- 3. Scroll progress ------------------------------------------ */
.progress {
  position: fixed; top: 0; left: 0; z-index: 8000;
  height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--brand-grad);
}

/* ---------- 4. Nav (üzən pill) ------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 7000; }
.nav__pill {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-block: 12px;
  padding: 10px 20px;
  border: .8px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(245, 247, 250, .8);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--sh-pill);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; display: block; }


.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 7px 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--ink-muted);
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--ink); background: rgba(23,29,44,.05); }
.nav__link.active { color: var(--brand-600); font-weight: 600; }

.nav__right { display: flex; align-items: center; gap: 8px; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px;
  background: var(--brand-grad); color: #fff;
  font-size: .875rem; font-weight: 700;
  box-shadow: var(--sh-brand);
  transition: transform .22s var(--e), box-shadow .22s;
}
.nav__btn:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(15,98,254,.8); }

.burger {
  display: none; width: 40px; height: 40px;
  border: .8px solid var(--line-soft2); border-radius: 11px; background: var(--white);
  color: var(--ink); place-items: center;
}
.burger svg { width: 20px; height: 20px; }

.drawer {
  position: fixed; inset: 74px 0 0; z-index: 6900;
  background: var(--white);
  padding: 22px var(--pad-x) 36px;
  display: grid; align-content: start; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--e), transform .28s var(--e), visibility .28s;
  overflow-y: auto;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.drawer a span { color: #98A0AE; font-size: .8rem; font-weight: 500; }
.drawer .btn-brand { margin-top: 20px; }

/* ---------- 5. Düymələr -------------------------------------------------- */
.btn-brand, .btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 16px;
  font-size: 1rem; font-weight: 600; white-space: nowrap;
  transition: transform .22s var(--e), box-shadow .24s var(--e), background .24s, border-color .24s, color .24s;
}
.btn-brand {
  background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand);
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(15,98,254,.85); }
.btn-soft {
  background: var(--paper); color: var(--ink-dark);
  border: .8px solid var(--line-soft2); box-shadow: var(--sh-soft);
}
.btn-soft:hover { transform: translateY(-2px); border-color: rgba(15,98,254,.35); color: var(--brand-600); }
.btn-brand svg, .btn-soft svg { width: 18px; height: 18px; flex: none; }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 36px; border-radius: 16px;
  background: var(--brand-grad-soft); color: #fff;
  font-size: 1rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase;
  box-shadow: 0 18px 36px -14px rgba(15,98,254,.7);
  transition: transform .22s var(--e), box-shadow .24s;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -14px rgba(15,98,254,.85); }
.btn-cta svg { width: 20px; height: 20px; flex: none; }

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: 16px;
  background: var(--brand-grad-soft); color: #fff;
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 18px 36px -14px rgba(15,98,254,.7);
  transition: transform .22s var(--e), box-shadow .24s;
}
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill svg { width: 18px; height: 18px; }

.btn-wa { background: linear-gradient(#2FD46F, #17A34A) !important; box-shadow: 0 14px 30px -12px rgba(23,163,74,.6) !important; }

.btn-block { width: 100%; }
.mag { display: inline-flex; will-change: transform; }

/* ---------- 6. Kart ------------------------------------------------------ */
.card {
  border: .8px solid var(--line); border-radius: 16px;
  background: var(--white); padding: 24px;
  box-shadow: var(--sh-card);
  transition: transform .28s var(--e), border-color .28s, box-shadow .28s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(15,98,254,.4); }

.icon-box {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--paper-2); color: var(--brand-600);
  transition: background .24s, color .24s;
}
.icon-box svg { width: 21px; height: 21px; }
.card:hover .icon-box { background: rgba(15,98,254,.1); }

/* ---------- 7. Chip / pill ---------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 16px;
  border: .8px solid var(--line-soft);
  background: var(--paper-card);
  box-shadow: var(--sh-soft);
  font-size: .8125rem; font-weight: 500; color: var(--ink-body);
}
.chip svg { width: 18px; height: 18px; color: var(--brand-600); flex: none; }
.chip b { display: block; font-weight: 700; font-size: .875rem; color: var(--ink); }
.chip span { color: var(--ink-muted); font-size: .75rem; }

.tagpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9999px;
  border: .8px solid var(--line); background: var(--white);
  font-size: .8125rem; font-weight: 600; color: var(--ink-body);
  box-shadow: var(--sh-soft);
}
.tagpill svg { width: 15px; height: 15px; color: var(--brand-600); flex: none; }

/* ---------- 8. Akkordeon (FAQ) ------------------------------------------ */
.faq-item {
  border: .8px solid var(--line); border-radius: 16px;
  background: var(--white); box-shadow: var(--sh-faq);
  overflow: hidden;
  transition: border-color .26s, box-shadow .26s;
}
.faq-item.open { border-color: rgba(15,98,254,.4); box-shadow: var(--sh-faq-open); }
.faq-item__btn {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 20px; text-align: left;
}
.faq-item__no {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--paper-2); color: var(--brand-600);
  font-size: .875rem; font-weight: 800;
  transition: all .28s var(--e);
}
.faq-item.open .faq-item__no { border-radius: 9999px; background: var(--brand-500); color: #fff; }
.faq-item__q { flex: 1; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.faq-item__chev { flex: none; width: 20px; height: 20px; color: #98A0AE; transition: transform .3s var(--e), color .24s; }
.faq-item.open .faq-item__chev { transform: rotate(180deg); color: var(--brand-500); }
.faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--e); }
.faq-item.open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__inner { overflow: hidden; }
.faq-item__inner > div { padding: 0 20px 20px 68px; font-size: .9375rem; line-height: 1.7; color: var(--ink-muted); }

/* ---------- 9. Modul akkordeonu ----------------------------------------- */
.module {
  border: .8px solid var(--line); border-radius: 16px;
  background: var(--white); box-shadow: var(--sh-mod);
  overflow: hidden;
  transition: border-color .26s, box-shadow .26s;
}
.module.open { border-color: rgba(15,98,254,.4); box-shadow: var(--sh-mod-open); }
.module__btn {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 20px; text-align: left;
}
.module__no {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--paper-2); color: var(--brand-600);
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
  transition: all .28s var(--e);
}
.module.open .module__no { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); }
.module__ttl { flex: 1; min-width: 0; }
.module__ttl h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.35; letter-spacing: -.025em; }
.module__ttl p { font-size: .8125rem; color: var(--ink-muted); margin-top: 2px; }
.module__cnt {
  flex: none; padding: 6px 12px; border-radius: 9999px;
  background: var(--paper); border: .8px solid var(--line);
  font-size: .75rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap;
}
.module__chev { flex: none; width: 20px; height: 20px; color: #98A0AE; transition: transform .3s var(--e), color .24s; }
.module.open .module__chev { transform: rotate(180deg); color: var(--brand-500); }

.module__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--e); }
.module.open .module__body { grid-template-rows: 1fr; }
.module__inner { overflow: hidden; }
.module__pad { padding: 0 20px 20px; }

.result-box {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  border: .8px solid var(--line); background: var(--paper);
  font-size: .875rem; line-height: 1.6; color: var(--ink-muted);
  margin-bottom: 18px;
}
.result-box svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand-600); }
.result-box b { color: var(--ink); font-weight: 700; }

.lessons-head {
  display: flex; align-items: center; gap: 9px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 10px;
}
.lessons-head svg { width: 16px; height: 16px; }
.lessons { display: grid; gap: 2px; }
@media (min-width: 900px) { .lessons { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.lesson {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  font-size: .875rem; line-height: 1.55; color: var(--ink-muted);
  transition: background .2s;
}
.lesson:hover { background: var(--paper-card); }
.lesson i { font-style: normal; flex: none; font-weight: 700; color: #98A0AE; font-size: .75rem; padding-top: 2px; min-width: 22px; }
.lesson em {
  font-style: normal; flex: none; margin-left: auto;
  font-size: .6875rem; font-weight: 700; color: var(--brand-600);
  background: rgba(15,98,254,.08); padding: 2px 8px; border-radius: 9999px; white-space: nowrap;
}

/* ---------- 10. Shopify sifariş bildirişi (bildirim.jpg-in eynisi) ------- */
.toasts {
  position: fixed; left: 20px; bottom: 20px; z-index: 6000;
  display: grid; gap: 10px; width: min(400px, calc(100vw - 40px));
  pointer-events: none;
}

.shopnote {
  position: relative;
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #B8B8B8;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: toastIn .42s var(--e) forwards;
  pointer-events: auto;
  overflow: hidden;
}
.shopnote.out { animation: toastOut .3s var(--e) forwards; }
.shopnote::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; background: #5E8E3E;
  animation: barDown var(--life, 7s) linear forwards;
}

.shopnote__ico {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #F1F4E8;
}
.shopnote__ico svg { width: 20px; height: 22px; }

.shopnote__body { min-width: 0; flex: 1; }

.shopnote__head { display: flex; align-items: center; gap: 10px; }
.shopnote__title {
  font-size: .9375rem; font-weight: 700; color: #1B1B1D;
  letter-spacing: -.01em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shopnote__time { margin-left: auto; flex: none; font-size: .75rem; color: #5F6167; white-space: nowrap; }
.shopnote__x {
  flex: none; width: 18px; height: 18px;
  display: grid; place-items: center;
  color: #5F6167; opacity: .85;
  transition: opacity .2s, transform .2s;
}
.shopnote__x:hover { opacity: 1; transform: scale(1.15); }
.shopnote__x svg { width: 14px; height: 14px; }

.shopnote__text {
  margin-top: 3px;
  font-size: .8125rem; line-height: 1.45; color: #2B2C30;
}
.shopnote__text b { font-weight: 600; color: #16171A; }
.shopnote__text span { color: #4E5055; }

.sound-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 6001;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 9999px;
  border: .8px solid var(--line); background: var(--white);
  box-shadow: var(--sh-card);
  font-size: .75rem; font-weight: 600; color: var(--ink-muted);
  transition: opacity .3s, transform .3s var(--e), border-color .24s;
}
.sound-toggle:hover { border-color: var(--brand-500); color: var(--brand-600); }
.sound-toggle svg { width: 15px; height: 15px; }
.sound-toggle.gone { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* ---------- 11. Modal ---------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 8500;
  display: grid; place-items: center; padding: clamp(10px, 3vw, 28px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--e), visibility .3s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal__veil { position: absolute; inset: 0; background: rgba(23,29,44,.45); backdrop-filter: blur(5px); }
.modal__panel {
  position: relative; width: min(880px, 100%); max-height: min(92vh, 900px); overflow: auto;
  border-radius: 24px; background: var(--white); box-shadow: 0 50px 100px -40px rgba(20,30,60,.6);
  transform: translateY(18px) scale(.98); opacity: 0;
  transition: transform .38s cubic-bezier(.34,1.4,.64,1), opacity .3s var(--e);
}
.modal.open .modal__panel { transform: none; opacity: 1; }
.modal__x {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: .8px solid var(--line); background: var(--white); color: var(--ink-muted);
  transition: transform .26s var(--e), background .24s, color .24s;
}
.modal__x:hover { transform: rotate(90deg); background: var(--bad); color: #fff; border-color: transparent; }
.modal__x svg { width: 15px; height: 15px; }
.modal--img .modal__panel { width: min(440px, 100%); background: none; box-shadow: none; }
.modal--img img { border-radius: 20px; box-shadow: var(--sh-shot); width: 100%; }

/* ---------- 12. Təqvim --------------------------------------------------- */
.book { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 480px; }
.book__aside { padding: 28px; border-right: .8px solid var(--line); background: var(--paper); display: grid; align-content: start; gap: 16px; }
.book__main  { padding: 28px; display: grid; align-content: start; gap: 16px; }
.book__steps { display: flex; gap: 6px; }
.book__step { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.book__step::after { content: ''; position: absolute; inset: 0; background: var(--brand-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--e); }
.book__step.on::after { transform: scaleX(1); }
.book__list { display: grid; gap: 9px; }
.book__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--ink-muted); }
.book__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand-600); }

.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal__month { font-size: 1rem; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; border: .8px solid var(--line); background: var(--white); color: var(--ink-muted);
  transition: border-color .2s, color .2s;
}
.cal__nav button:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-600); }
.cal__nav button:disabled { opacity: .35; cursor: not-allowed; }
.cal__nav svg { width: 14px; height: 14px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; font-size: .6875rem; font-weight: 600; color: #98A0AE; text-transform: uppercase; padding-bottom: 4px; }
.cal__day {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 10px; border: .8px solid transparent;
  font-size: .875rem; font-weight: 500; color: var(--ink-body);
  transition: background .18s, color .18s, border-color .18s, transform .22s var(--e);
}
.cal__day:hover:not(:disabled):not(.off) { background: var(--paper); transform: scale(1.06); }
.cal__day:disabled, .cal__day.off { color: #B4BAC6; opacity: .6; cursor: not-allowed; }
.cal__day.today { border-color: rgba(15,98,254,.4); font-weight: 700; }
.cal__day.sel { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; max-height: 210px; overflow-y: auto; padding-right: 3px; }
.slot {
  padding: 10px 5px; border-radius: 10px; border: .8px solid var(--line); background: var(--white);
  font-size: .8125rem; font-weight: 600; color: var(--ink-body);
  transition: border-color .2s, color .2s, background .2s;
}
.slot:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-600); }
.slot.sel { background: var(--brand-grad); color: #fff; border-color: transparent; }
.slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.field { display: grid; gap: 6px; }
.field label { font-size: .78rem; font-weight: 600; color: var(--ink-body); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: .8px solid var(--line); background: var(--white); color: var(--ink-body); font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #A8AFBC; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(15,98,254,.12);
}
.field.err input, .field.err select { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(224,82,95,.12); }

.book__summary { display: grid; gap: 9px; padding: 15px; border-radius: 12px; border: .8px dashed #C9D0DC; background: var(--white); }
.book__row { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; }
.book__row span:first-child { color: var(--ink-muted); }
.book__row span:last-child { font-weight: 600; color: var(--ink); text-align: right; }

.book__ok { display: grid; place-items: center; text-align: center; gap: 16px; padding: 44px 28px; }
.book__ok-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(18,161,80,.1); border: .8px solid rgba(18,161,80,.25); color: var(--ok); }
.book__ok-ico svg { width: 28px; height: 28px; }

/* ---------- 13. Üzən düymələr (Zeon AI + WhatsApp) ----------------------- */
.fabstack {
  position: fixed; right: 20px; bottom: 20px; z-index: 6500;
  display: grid; justify-items: end; gap: 12px;
}

/* — Zeon AI düyməsi (WhatsApp-ın üstündə) — */
.aifab {
  position: relative;
  display: flex; align-items: center; height: 54px; padding: 0 7px;
  border-radius: 9999px;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 14px 32px -12px rgba(15, 98, 254, .75);
  overflow: hidden;
  transition: padding-right .35s var(--e), transform .3s var(--e), box-shadow .3s;
}
.aifab:hover { padding-right: 20px; transform: translateY(-2px); }
.aifab__ico { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.aifab__ico svg {
  grid-area: 1 / 1; width: 24px; height: 24px;
  transition: opacity .26s var(--e), transform .3s var(--e);
}
.aifab__x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.aifab.active .aifab__ai { opacity: 0; transform: rotate(90deg) scale(.6); }
.aifab.active .aifab__x  { opacity: 1; transform: none; }
.aifab__txt {
  max-width: 0; opacity: 0;
  font-size: .875rem; font-weight: 700; white-space: nowrap;
  transition: max-width .38s var(--e), opacity .26s;
}
.aifab:hover .aifab__txt { max-width: 200px; opacity: 1; }

/* diqqət çəkən nöqtə */
.aifab.nudge::after {
  content: '';
  position: absolute; top: 9px; right: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FF5F6D; border: 2px solid #fff;
  animation: nudgePulse 1.8s ease-in-out infinite;
}
.aifab.active::after { display: none; }
@keyframes nudgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .7; }
}

/* — üzən söhbət pəncərəsi — */
.chatpop {
  position: fixed; right: 20px; bottom: 92px; z-index: 6600;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 140px));
  border: .8px solid var(--line); border-radius: 20px;
  background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(20, 30, 60, .5);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .3s var(--e), transform .34s cubic-bezier(.34,1.4,.64,1), visibility .3s;
}
.chatpop.open { opacity: 1; visibility: visible; transform: none; }

.chatpop__head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-bottom: .8px solid var(--line);
  background: var(--paper);
}
.chatpop__x {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-muted);
  transition: background .2s, color .2s;
}
.chatpop__x:hover { background: rgba(23,29,44,.07); color: var(--ink); }
.chatpop__x svg { width: 15px; height: 15px; }

.chatpop .chat__body  { padding: 14px; gap: 12px; }
.chatpop .msg__bubble { max-width: 86%; font-size: .86rem; }
.chatpop .chat__chips { padding: 10px 14px 0; }
.chatpop .chat__form  { padding: 12px 14px; }

/* ---------- WhatsApp FAB ------------------------------------------------- */
.fab {
  position: relative;
  display: flex; align-items: center; height: 54px; padding: 0 7px;
  border-radius: 9999px; background: linear-gradient(#2FD46F, #17A34A); color: #fff;
  box-shadow: 0 14px 32px -12px rgba(23,163,74,.7);
  overflow: hidden;
  transition: padding-right .35s var(--e), transform .3s var(--e);
}
.fab:hover { padding-right: 20px; transform: translateY(-2px); }
.fab__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.fab__ico svg { width: 25px; height: 25px; }
.fab__txt { max-width: 0; opacity: 0; font-size: .875rem; font-weight: 700; white-space: nowrap; transition: max-width .38s var(--e), opacity .26s; }
.fab:hover .fab__txt { max-width: 180px; opacity: 1; }
.fab::before {
  content: ''; position: absolute; left: 7px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; border: 2px solid rgba(47,212,111,.8);
  animation: ripple 2.4s var(--e) infinite; pointer-events: none;
}