/* =========================================================
   TURKISH WITH BUSE — SHARED DESIGN SYSTEM (every page)
   One set of colours, radii, shadows, focus rings and motion,
   loaded LAST on every page. Visual only: no layout logic, no
   hidden/shown elements, nothing that changes how a feature works.
   ========================================================= */
:root{
  /* sophisticated pink */
  --twb-pink-50:#FFF4F9; --twb-pink-100:#FDE7F2; --twb-pink-200:#FBCFE6; --twb-pink-300:#F7A8D1;
  --twb-pink-400:#F472B6; --twb-pink-500:#EC4899; --twb-pink-600:#DB2777; --twb-pink-700:#BE185D; --twb-plum:#4A1D3F;
  --twb-ink:#1E1528; --twb-text:#4A4356; --twb-muted:#857D92; --twb-line:#F0E6EE; --twb-surface:#FFFFFF;
  --twb-r-sm:12px; --twb-r:18px; --twb-r-lg:26px;
  --twb-shadow-sm:0 2px 8px -3px rgba(74,29,63,.12);
  --twb-shadow:0 16px 36px -24px rgba(74,29,63,.38);
  --twb-shadow-hover:0 22px 44px -24px rgba(190,24,93,.38);
  --twb-ring:0 0 0 3px #fff,0 0 0 5px rgba(236,72,153,.55);
  --twb-ease:cubic-bezier(.2,.8,.2,1);
  --twb-grad:linear-gradient(135deg,#F472B6 0%,#EC4899 55%,#DB2777 100%);
}

/* ---------- text & basics ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
::selection{background:var(--twb-pink-200);color:var(--twb-plum)}
h1,h2,h3{letter-spacing:-.015em}
img{-webkit-user-drag:none}

/* ---------- keyboard focus: one clear pink ring everywhere ---------- */
:where(a,button,input,select,textarea,summary,[tabindex],[role=button]):focus-visible{outline:none!important;box-shadow:var(--twb-ring)!important}

/* ---------- buttons: the same press feel on every page ---------- */
:where(button,.btn,.primary-btn,.secondary-btn,.btn-plan,.btn-hero,.btn-start,.lx-btn,.btn-map,.pill-tab,.cbtn){transition:transform .16s var(--twb-ease),box-shadow .2s var(--twb-ease),background-color .2s,color .2s,border-color .2s}
:where(.primary-btn,.secondary-btn,.btn-plan,.btn-hero,.btn-start,.lx-btn,.btn-map,.wchip):not(:disabled):active{transform:scale(.97)}
:where(.primary-btn,.btn-hero,.btn-start,.btn.primary,.featured-btn):not(:disabled):hover{box-shadow:0 12px 26px -12px rgba(219,39,119,.65)}
button:disabled,.btn[aria-disabled=true]{cursor:not-allowed}

/* ---------- cards that open something: a gentle lift ---------- */
:where(.quick-card,.main-act,.nt-cat,.map-step.clickable,.book,.card,.cat-card,.pr-card,.tu-card,.wl-card,.dl-card,.tile):not(.is-locked){transition:transform .22s var(--twb-ease),box-shadow .22s var(--twb-ease),border-color .22s}
@media (hover:hover){
  :where(.quick-card,.main-act,.nt-cat,.map-step.clickable,.book,.card,.cat-card,.pr-card,.tu-card,.dl-card):not(.is-locked):hover{transform:translateY(-3px);box-shadow:var(--twb-shadow-hover)}
}

/* ---------- form fields ---------- */
:where(input[type=text],input[type=email],input[type=password],input[type=search],input:not([type]),textarea,select){transition:border-color .2s,box-shadow .2s}
:where(input[type=text],input[type=email],input[type=password],input[type=search],input:not([type]),textarea):focus{border-color:var(--twb-pink-400)!important}

/* ---------- top bars of the learning pages: the same soft glass as the app ---------- */
header.top,header.bar,header.lx-top{background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--twb-line)!important;box-shadow:0 8px 24px -22px rgba(74,29,63,.45)}

/* ---------- the ✕ Close button: identical on every page ---------- */
.twb-close{transition:background-color .2s,box-shadow .2s,transform .16s var(--twb-ease)}
.twb-close:hover{box-shadow:var(--twb-shadow-sm)}

/* ---------- scrollbars (desktop) ---------- */
@media (hover:hover){
  *{scrollbar-width:thin;scrollbar-color:var(--twb-pink-200) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--twb-pink-200);border-radius:10px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--twb-pink-300)}
}

/* ---------- toasts / pop-ups ---------- */
.toast{border-radius:var(--twb-r-sm);box-shadow:var(--twb-shadow)}

/* ---------- people who prefer less motion get none ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =========================================================
   CALMER, MORE PREMIUM LOOK (Nov 2026)
   Solid buttons instead of glowing gradients, lighter shadows,
   white cards, quiet labels. Same layout and features.
   ========================================================= */
:root{--shadow:0 1px 2px rgba(30,21,40,.04),0 10px 28px -20px rgba(30,21,40,.22);--twb-shadow:0 1px 2px rgba(30,21,40,.04),0 10px 28px -20px rgba(30,21,40,.22);--twb-shadow-hover:0 2px 4px rgba(30,21,40,.05),0 14px 32px -20px rgba(30,21,40,.28)}

/* buttons: one solid pink, no glow */
.primary-btn,.btn-hero,.btn-start,.btn-plan.featured-btn,.live-btn,.lr-btn,.btn.primary{background:#DB2777!important;color:#fff!important;box-shadow:0 1px 2px rgba(30,21,40,.14)!important;border:none}
:where(.primary-btn,.btn-hero,.btn-start,.btn-plan.featured-btn,.live-btn,.btn.primary):not(:disabled):hover{background:#BE185D!important;box-shadow:0 1px 2px rgba(30,21,40,.14)!important}
.btn-hero{font-weight:700}
.secondary-btn{box-shadow:none!important}
.plus-pill{background:#1E1528!important;color:#fff!important;box-shadow:none!important;font-weight:700}
.plus-pill.on{background:#FDF2F8!important;color:#BE185D!important}

/* top bar: active tab is a soft pink chip, icons are line icons */
.pill-tab.active{background:#FDF2F8!important;color:#BE185D!important;box-shadow:none!important}
.pill-tab i.ic{display:inline-flex;align-items:center;font-style:normal}
.pill-tab i.ic svg{display:block}
.meta-pill{display:inline-flex;align-items:center;gap:5px;box-shadow:none!important}
.nt-switch{box-shadow:none!important;border:1px solid var(--twb-line)}
.nt-switch button.on{background:#FDF2F8!important;color:#BE185D!important}

/* labels above headings: quiet small caps, no sparkles, no pill */
.card-kicker::after{display:none!important}
.kicker-tag{background:none!important;padding:0!important;letter-spacing:.12em;font-size:.72rem}
.badge-pill{box-shadow:none;display:inline-flex;align-items:center;gap:8px}
.bp-dot{width:7px;height:7px;border-radius:50%;background:#DB2777;flex:none}
.pink-gradient{background:none!important;-webkit-text-fill-color:#DB2777!important;color:#DB2777}

/* cards: white, thin border, no colour washes */
.nt-cat{border:1px solid var(--twb-line)!important;background:#fff!important;box-shadow:var(--shadow)!important}
.nt-cat-ico{background:#FDF2F8!important}
.nt-cat-tag{background:#F3F4F6!important;color:#4B5563!important}
.nt-cat-tag:not(.lock){background:#ECFDF5!important;color:#047857!important}
.quick-card,.tutor-card,.stat-tile,.hub-card,.price-card{background:#fff!important;border:1px solid var(--twb-line)!important}
.hub-art{background:#FDF2F8!important}.hub-art b{filter:none!important}
.white-card,.welcome-card,.nt-hero,.ws-main,.side-card,.nt-one,.activity-card{box-shadow:var(--shadow)!important;border:1px solid var(--twb-line)!important}
.welcome-card{background:#fff!important}
.badge-popular{box-shadow:none}
.mock-score{background:#ECFDF5}

/* WhatsApp: a small, quiet round button */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:300;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:#16A34A;border:1px solid #DCFCE7;box-shadow:0 6px 18px -8px rgba(30,21,40,.35);text-decoration:none;transition:transform .2s}
.wa-float:hover{transform:translateY(-2px);color:#15803D}

/* a brand-new learner sees a friendly line instead of rows of zeros */
.is-fresh .ql-list{display:none}
.wk-empty{margin:12px 0 4px;padding:14px 16px;border-radius:14px;background:#FDF2F8;color:#831843;font-weight:600;line-height:1.5}

.card-icon{width:48px;height:48px;border-radius:14px;background:#FDF2F8;color:#DB2777;display:flex;align-items:center;justify-content:center;font-size:0}
.sit-tag.lock{color:#6B7280!important}

/* "Checked by Buse" — content proofread by the teacher */
.checked-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;font-size:.78rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.sit-head .checked-badge{margin-top:6px}