/* =========================================================
   TURKISH WITH BUSE — LOOK & FEEL ("Istanbul, light")
   White first, soft pastel accents, an Istanbul skyline behind
   the page, floating rounded bars and glassy cards.
   Loaded last so it restyles the pages without touching their logic.
   ========================================================= */
:root{
  --bg:#FFFFFF; --glass:rgba(255,255,255,.86); --line:#EEF0F6;
  --shadow:0 18px 44px -26px rgba(49,46,129,.28);
  --hand:'Caveat','Segoe Script','Bradley Hand',cursive;
}
html{background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFF 45%,#FFF9FB 100%) fixed;}
body{background:transparent;}
/* the scenery: skyline bottom-right, a blossom branch top-left — both very light */
body::before{content:'';position:fixed;inset:auto 0 0 0;height:min(64vh,620px);z-index:-1;pointer-events:none;
  background:url(../images/scene.svg) right bottom/cover no-repeat;opacity:.9;}
body::after{content:'';position:fixed;left:-30px;top:64px;width:230px;height:230px;z-index:-1;pointer-events:none;
  background:url(../images/blossom.svg) left top/contain no-repeat;opacity:.55;}
.view{background:transparent!important;}

/* ---------- floating top bars ---------- */
.dash-nav,.main-header{width:calc(100% - 36px);max-width:1380px;margin:14px auto 0;border-radius:26px;border:1px solid var(--line);
  background:rgba(255,255,255,.94);box-shadow:var(--shadow);top:12px;}
.pill-tabs{background:transparent;gap:2px;}
.pill-tab{padding:10px 16px;font-size:.9rem;}
.pill-tab:hover{background:#F6F7FB;}
.pill-tab.active{background:linear-gradient(135deg,#F472B6,#EC4899);box-shadow:0 8px 18px -8px rgba(236,72,153,.7);}
.meta-pill{background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px -8px rgba(0,0,0,.2);}

/* ---------- cards ---------- */
.white-card,.welcome-card,.nt-hero,.price-card,.ws-main,.side-card,.nt-one,.activity-card{
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #fff;box-shadow:var(--shadow);border-radius:26px;}
.card-kicker,.lx-kicker{color:#EC4899;letter-spacing:.06em;position:relative;display:inline-block;}
.card-kicker::after{content:'';display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-1px;
  background:radial-gradient(circle at 50% 50%,#EC4899 0 1.5px,transparent 2px) 0 0/7px 7px;transform:rotate(-20deg);opacity:.7;}
h2.hub-title,.white-card>h3,.nt-hero h2{letter-spacing:-.02em;}
.hand-note{position:absolute;right:-210px;top:34px;font-family:var(--hand);font-size:1.55rem;line-height:1.15;color:#EC4899;transform:rotate(-7deg);text-align:center;pointer-events:none;opacity:.9;white-space:pre-line;}
.dash-container{position:relative;}
@media(max-width:1480px){.hand-note{display:none;}}

/* ---------- welcome + today ---------- */
.welcome-card{background:linear-gradient(100deg,rgba(255,255,255,.95),rgba(255,247,250,.9));padding:26px 28px;}
.quick-card{background:linear-gradient(180deg,#fff,#FAFBFF);border-radius:20px;align-items:center;text-align:center;padding:18px 12px;box-shadow:0 10px 22px -18px rgba(49,46,129,.35);}
.quick-card span{width:54px;height:54px;border-radius:18px;font-size:1.6rem;}
.quick-card:nth-child(1){background:linear-gradient(180deg,#fff,#F5F3FF);}
.quick-card:nth-child(2){background:linear-gradient(180deg,#fff,#FFF7ED);}
.quick-card:nth-child(3){background:linear-gradient(180deg,#fff,#F5F3FF);}
.quick-card:nth-child(4){background:linear-gradient(180deg,#fff,#FFF1F2);}
.quick-card:nth-child(5){background:linear-gradient(180deg,#fff,#FEFCE8);}
.quick-card:nth-child(6){background:linear-gradient(180deg,#fff,#EFF6FF);}
.daily-card{background:linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,251,235,.9))!important;}

/* ---------- practice hub (three soft cards per row, as in the design) ---------- */
.hub-title{font-size:2.2rem;line-height:1.15;margin:6px 0 4px;}
.hub-title u{text-decoration:none;background:linear-gradient(transparent 82%,#F9A8D4 82% 92%,transparent 92%);}
.hub-sub{color:var(--body);font-size:1.05rem;margin-bottom:22px;}
.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.hub-card{min-height:200px;padding:22px;gap:16px;align-items:center;border:1px solid #fff;border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),color-mix(in srgb,var(--c) 9%,white));box-shadow:var(--shadow);}
.hub-card:hover{border-color:color-mix(in srgb,var(--c) 55%,white);}
.hub-art{width:96px;height:96px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 22%,white));overflow:visible;}
.hub-art i{display:none;}
.hub-art b{font-size:3rem;filter:drop-shadow(0 10px 12px color-mix(in srgb,var(--c) 35%,transparent));}
.hub-txt{padding:0;gap:7px;}
.hub-card h4{font-size:1.4rem;}
.hub-stat{order:-1;}
.hub-cta{margin-top:6px;align-self:flex-start;background:#fff;border-radius:30px;padding:9px 18px;box-shadow:0 8px 18px -12px color-mix(in srgb,var(--c) 80%,black);font-size:.9rem;}
.hub-card:hover .hub-cta{background:var(--c);color:#fff;}
@media(max-width:1100px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.hub-grid{grid-template-columns:1fr;}.hub-art{width:84px;height:84px;}.hub-art b{font-size:2.6rem;}.hub-stat{position:static;}.hub-title{font-size:1.6rem;}}

/* ---------- roadmap ---------- */
.level-tab{border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.9);box-shadow:0 8px 18px -16px rgba(49,46,129,.4);padding:12px 18px;}
.level-tab.selected{border-color:#EC4899;background:#fff;box-shadow:0 0 0 4px #FCE7F3;}
.map-step{border-radius:22px;padding:18px 22px;border:1px solid #fff;background:rgba(255,255,255,.9);box-shadow:0 10px 24px -20px rgba(49,46,129,.4);}
.map-step.done{background:linear-gradient(90deg,rgba(236,253,245,.95),rgba(240,253,250,.9));border-color:#D1FAE5;}
.map-step.plus-locked{background:linear-gradient(90deg,rgba(255,251,235,.95),rgba(255,247,237,.9));border-color:#FEF3C7;}
.map-step.active-step{border:2px solid #F9A8D4;background:#fff;}
.map-step:hover{transform:translateX(3px);}

/* ---------- Natural Turkish ---------- */
.nt-cat{border:1px solid #fff;border-top:5px solid var(--c);border-radius:26px;box-shadow:var(--shadow);
  background:linear-gradient(160deg,rgba(255,255,255,.97),color-mix(in srgb,var(--c) 8%,white));padding:22px;}
.nt-cat-ico{width:64px;height:64px;font-size:2.1rem;border-radius:20px;background:radial-gradient(circle at 30% 30%,#fff,color-mix(in srgb,var(--c) 20%,white));}
.nt-cat b{font-size:1.25rem;}
.nt-cat-bar{background:color-mix(in srgb,var(--c) 14%,white);height:8px;}
.nt-hero{padding:24px 28px;}

/* ---------- AI tutor ---------- */
.tutor-card{border:1px solid #fff;border-radius:26px;padding:24px;box-shadow:var(--shadow);gap:8px;}
.tutor-card:nth-child(1){background:linear-gradient(160deg,#fff,#FFF1F2);}
.tutor-card:nth-child(2){background:linear-gradient(160deg,#fff,#F5F3FF);}
.tutor-card:nth-child(3){background:linear-gradient(160deg,#fff,#EFF6FF);}
.tutor-card:nth-child(4){background:linear-gradient(160deg,#fff,#ECFDF5);}
.tutor-card .t-ico{font-size:2.4rem;}
.tutor-card em{align-self:flex-start;justify-self:start;background:#fff;border-radius:30px;padding:7px 16px;box-shadow:0 8px 16px -12px rgba(0,0,0,.4);}
.tutor-lock{border-radius:22px;background:linear-gradient(90deg,rgba(255,251,235,.96),rgba(255,247,237,.92));border:1px solid #FDE68A;}

/* ---------- progress ---------- */
.stat-tile{border-radius:20px;background:#fff;border:1px solid var(--line);}
.stat-tile:nth-child(6n+1){background:linear-gradient(160deg,#fff,#FFF1F2);}
.stat-tile:nth-child(6n+2){background:linear-gradient(160deg,#fff,#ECFDF5);}
.stat-tile:nth-child(6n+3){background:linear-gradient(160deg,#fff,#FFFBEB);}
.stat-tile:nth-child(6n+4){background:linear-gradient(160deg,#fff,#F5F3FF);}
.stat-tile:nth-child(6n+5){background:linear-gradient(160deg,#fff,#FFF7ED);}
.stat-tile:nth-child(6n+6){background:linear-gradient(160deg,#fff,#EFF6FF);}

/* ---------- landing + pricing ---------- */
.hero-block{background:transparent!important;}
.price-card{padding:28px;}
.price-card.featured{border:2px solid #F9A8D4;box-shadow:0 24px 50px -26px rgba(236,72,153,.55);}
.primary-btn,.btn-hero,.btn-start{background:linear-gradient(135deg,#F472B6,#EC4899);box-shadow:0 12px 24px -12px rgba(236,72,153,.75);}
.secondary-btn{box-shadow:0 8px 18px -14px rgba(0,0,0,.4);}

/* ---------- lists of topics ---------- */
.pb-row{border:1px solid #fff;border-left:8px solid var(--c);background:var(--glass);backdrop-filter:blur(8px);box-shadow:0 12px 26px -22px rgba(49,46,129,.5);}

@media(max-width:860px){
  body::before{height:42vh;opacity:.55;} body::after{display:none;}
  .dash-nav,.main-header{width:calc(100% - 16px);margin-top:8px;border-radius:20px;top:6px;}
  .pill-tabs{background:#fff;}
  .pill-tab{padding:6px 2px;font-size:.7rem;box-shadow:none!important;}
  .meta-pill,.plus-pill{white-space:nowrap;font-size:.78rem;padding:6px 10px;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}

/* a little more room for the page on wide screens */
@media(min-width:1280px){.dash-container{max-width:1180px;}}
@media(min-width:900px){.nt-cats{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* painted artwork supplied as an image file (see js/practice.js): shown instead of the drawn skyline, washed towards white */
.has-art body::before{height:100vh;inset:0;opacity:1;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.35)),var(--art) center bottom/cover no-repeat;}
.has-art body::after{display:none;}
.art-icon{width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.2em;}
.hub-art .art-icon{width:92px;height:92px;}
/* the drawn scenery, a little richer */
body::before{opacity:1;}
body::after{width:300px;height:300px;opacity:.8;}