/* Every section gets its own composition (loaded after playful.css) */

:root { --paper: #fffdf6; --sticker: #ffd84d; --ink-dark: #12224a; }

/* ═════════ HERO: bento board ═════════ */
.hero-visual { display: grid !important; grid-template-columns: 1.1fr .9fr; gap: 1.1rem; align-items: stretch; }
.hero-visual > * { margin: 0; }
.hero-visual .buki-hero {
  grid-column: 1; grid-row: 1 / span 2; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0;
  position: relative; overflow: hidden; padding: 1.3rem 1.1rem 0;
  background: var(--blue); border: 2px solid rgba(0, 0, 0, .18); border-radius: 32px; box-shadow: 0 9px 0 rgba(0, 0, 0, .25);
}
.hero-visual .buki-hero .bubble { order: 1; max-width: 100%; margin: 0 0 1.1rem; text-align: center; }
.hero-visual .buki-hero .bubble::before {
  left: 50%; right: auto; bottom: -10px; margin-left: -8px; transform: rotate(45deg); border: none;
  border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); border-radius: 0 0 5px 0;
}
.hero-visual .buki-hero-fig { order: 2; width: 92%; margin-bottom: -6px; }
.hero-visual .buki-hero-fig::before { inset: 14% 0 0 0; }
.hero-visual > :nth-child(2) { grid-column: 2; grid-row: 1; background: var(--sticker); color: var(--ink-dark); border-color: rgba(0, 0, 0, .16) !important; }
.hero-visual > :nth-child(2) h4, .hero-visual > :nth-child(2) p { color: var(--ink-dark); }
.hero-visual > :nth-child(2) .ic-icon { background: #fff !important; }
.hero-visual > :nth-child(3) { grid-column: 2; grid-row: 2; }
.hero-visual > :nth-child(4) { grid-column: 1 / 3; }
.hero-visual > :nth-child(5) { grid-column: 1 / 3; }
.hero-visual .info-card { padding: 1.05rem 1.2rem; }
.hero-visual .info-card p { font-size: .8rem; }
.hero-visual .ic-top { margin-bottom: .55rem; }
@media (max-width: 960px) { .hero-visual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .hero-visual { grid-template-columns: 1fr; }
  .hero-visual > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ═════════ NEDEN BİZ: colourful bento ═════════ */
.feat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.feat-card { display: flex; flex-direction: column; }
.feat-card:nth-child(1), .feat-card:nth-child(6) { grid-column: 1 / 3; display: grid; grid-template-columns: auto 1fr; column-gap: 1.3rem; align-items: center; }
.feat-card:nth-child(1) .fc-icon, .feat-card:nth-child(6) .fc-icon { grid-row: 1 / 3; margin: 0; width: 66px; height: 66px; }
.feat-card:nth-child(1) { background: var(--blue); border-color: rgba(0, 0, 0, .18) !important; }
.feat-card:nth-child(1) h3, .feat-card:nth-child(1) p { color: #fff; }
.feat-card:nth-child(1) h3 { font-size: 1.35rem; }
.feat-card:nth-child(1) .fc-icon, .feat-card:nth-child(5) .fc-icon { background: #fff !important; }
.feat-card:nth-child(3) { background: var(--sticker); border-color: rgba(0, 0, 0, .16) !important; }
.feat-card:nth-child(3) h3, .feat-card:nth-child(3) p { color: var(--ink-dark); }
.feat-card:nth-child(3) .fc-icon { background: #fff !important; }
.feat-card:nth-child(5) { background: var(--navy); border-color: rgba(0, 0, 0, .25) !important; }
.feat-card:nth-child(5) h3, .feat-card:nth-child(5) p { color: #fff; }
.feat-card:nth-child(6) { background: var(--blue-lt); }
.feat-card h3 { font-size: 1.08rem !important; }
.feat-card p { font-size: .88rem !important; }
@media (max-width: 640px) { .feat-card:nth-child(1), .feat-card:nth-child(6) { grid-column: 1; } }

/* ═════════ NASIL ÇALIŞIR: chalkboard ═════════ */
.math-display {
  background: var(--navy) !important; background-image: none !important;
  border: 12px solid #c98d4b !important; border-radius: 26px !important; padding: 2.3rem 2.1rem 2.7rem !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .28), inset 0 0 40px rgba(0, 0, 0, .25), 0 12px 0 rgba(0, 0, 0, .25) !important;
}
.math-display::after {
  content: ''; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 12px; border-radius: 8px 8px 0 0; background: #ece4d0;
}
.math-display .md-eq { font-family: var(--font-display); text-shadow: 0 0 2px rgba(255, 255, 255, .55); }
.math-display .md-tag { background: transparent; border: 2px dashed rgba(255, 255, 255, .42) !important; border-radius: 14px; }
.math-display .md-tag span { color: #fff; }
.math-display .md-kicker { color: rgba(255, 255, 255, .7); }

/* ═════════ VELİLER: WhatsApp sohbeti ═════════ */
.veli-wrap { align-items: start; }
.veli-cards { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.8rem; }
.veli-cards .v-card { padding: .95rem 1.1rem; }
.veli-cards .v-card p { font-size: .8rem; }
.chat-wrap { display: flex; justify-content: center; position: sticky; top: 100px; }
.chat {
  width: min(360px, 100%); border-radius: 34px; overflow: hidden; background: #ece5dd; border: 6px solid #0b1b3a;
  box-shadow: 0 0 0 3px var(--line), 0 12px 0 rgba(0, 0, 0, .25); transform: rotate(-1.6deg);
}
.chat-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem .9rem; background: #075e54; color: #fff; }
.chat-head b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; }
.chat-head small { opacity: .8; font-size: .75rem; }
.chat-av { width: 44px; height: 44px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.chat-av img { width: 100%; height: auto; }
.chat-dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 4px rgba(37, 211, 102, .3); }
.chat-body { padding: 1.2rem 1rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; min-height: 340px; }
.msg {
  position: relative; max-width: 86%; padding: .65rem .9rem; border-radius: 6px 18px 18px 18px; background: #fff; color: #1b2a2f;
  font-size: .9rem; line-height: 1.4; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); animation: msgIn .6s var(--bounce) both;
}
.msg:nth-child(2) { animation-delay: .5s; } .msg:nth-child(3) { animation-delay: 1s; } .msg:nth-child(4) { animation-delay: 1.6s; }
.msg.me { align-self: flex-end; background: #dcf8c6; border-radius: 18px 6px 18px 18px; }
.tick { margin-left: .5rem; color: #34b7f1; font-size: .78rem; font-weight: 700; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) { .chat-wrap { position: static; } }

/* ═════════ SEVİYELER: staircase ═════════ */
.lev-grid { align-items: start; gap: 1.2rem; }
.lev-card:nth-child(1) { margin-top: 105px; background: var(--blue-lt); }
.lev-card:nth-child(2) { margin-top: 70px; background: var(--blue-mid); }
.lev-card:nth-child(3) { margin-top: 35px; background: var(--blue); border-color: rgba(0, 0, 0, .18) !important; }
.lev-card:nth-child(4) { margin-top: 0; background: var(--navy); border-color: rgba(0, 0, 0, .25) !important; }
.lev-card:nth-child(3) h3, .lev-card:nth-child(3) p, .lev-card:nth-child(3) .lv-no,
.lev-card:nth-child(4) h3, .lev-card:nth-child(4) p, .lev-card:nth-child(4) .lv-no { color: #fff !important; }
.lev-card:nth-child(3) .lv-icon, .lev-card:nth-child(4) .lv-icon { background: #fff !important; }
.lev-card:nth-child(4)::after { content: '🚩'; position: absolute; right: 16px; top: -26px; font-size: 1.9rem; transform: rotate(8deg); }
.lev-card { padding-top: 1.6rem; padding-bottom: 1.8rem; }
@media (max-width: 960px) { .lev-card:nth-child(n) { margin-top: 0; } }

/* ═════════ İLK DERS: coupon ═════════ */
#deneme .cta-box {
  background: var(--surface) !important; background-image: none !important; color: var(--text); overflow: visible;
  border: 3px dashed var(--blue) !important; border-radius: 28px !important; padding: 2.6rem 2rem 2.3rem; box-shadow: 0 10px 0 rgba(0, 0, 0, .25) !important;
  transform: rotate(1.4deg);
}
#deneme .cta-box::before, #deneme .cta-box::after {
  content: ''; position: absolute; top: 58%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--navy); z-index: 2;
}
#deneme .cta-box::before { left: -21px; } #deneme .cta-box::after { right: -21px; }
#deneme .cta-price { color: var(--ink); font-size: 4.6rem; font-weight: 700; }
#deneme .cta-price-sub { color: var(--text-sub); }
#deneme .cta-box p { color: var(--text-sub); }
#deneme .cta-box .btn-white { background: var(--blue); color: #fff; border-color: rgba(0, 0, 0, .25); }
.stamp {
  position: absolute; top: -30px; right: 20px; z-index: 3; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--sticker); color: var(--ink-dark); font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.05; text-transform: uppercase;
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 79% 21%, 94% 22%, 90% 37%, 100% 50%, 90% 63%, 94% 78%, 79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 78%, 10% 63%, 0% 50%, 10% 37%, 6% 22%, 21% 21%, 25% 6%, 39% 12%);
  transform: rotate(14deg); animation: wobble 4.5s ease-in-out infinite;
}
#deneme .check-item { font-size: 1rem; }
#deneme .check-item::before { background: var(--sticker); color: var(--ink-dark); border-radius: 50%; width: 24px; height: 24px; line-height: 24px; font-weight: 700; }

/* ═════════ İLETİŞİM: big buttons + paper form ═════════ */
.contact-wrap .c-item { border-radius: 999px !important; padding: .9rem 1.5rem .9rem .9rem !important; margin-bottom: 1rem; }
a.c-item[href*="wa.me"] { background: #25d366; color: #fff; border-color: rgba(0, 0, 0, .18) !important; }
a.c-item[href^="tel"] { background: var(--navy); color: #fff; border-color: rgba(0, 0, 0, .25) !important; }
.c-item:not(a) { background: var(--sticker); color: var(--ink-dark); border-color: rgba(0, 0, 0, .16) !important; }
.c-item .ci-l, .c-item .ci-v { color: inherit !important; }
.c-item .ci-l { opacity: .8; }
.c-item .ci-icon { background: #fff !important; }
.c-item .ci-v { font-family: var(--font-display); font-size: 1.15rem; }
.c-form {
  position: relative; padding: 2.2rem 2rem 2rem; background: var(--paper); border: 2px dashed var(--line); border-radius: 26px;
  box-shadow: 0 10px 0 var(--chunk); transform: rotate(.8deg);
}
.c-form::before {
  content: ''; position: absolute; top: -13px; left: 50%; width: 88px; height: 26px; margin-left: -44px; background: rgba(255, 216, 77, .85); border-radius: 3px; transform: rotate(-2deg);
}
.f-group input, .f-group select, .f-group textarea { background: #fff; }
.f-submit { align-self: flex-start; padding: .9rem 2rem !important; }

/* ═════════ KARİYER: numbered perks, speech-bubble quote, colour banner ═════════ */
.ik-right { counter-reset: ik; }
.ik-card { counter-increment: ik; position: relative; overflow: hidden; }
.ik-card::after {
  content: counter(ik); position: absolute; right: 16px; top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--blue-mid); opacity: .9;
}
.ik-quote {
  background: var(--surface) !important; background-image: none !important; color: var(--text); border: 3px solid var(--line) !important;
  border-radius: 34px !important; padding: 2.6rem 3rem !important; box-shadow: 0 10px 0 var(--chunk) !important; margin-bottom: 2.6rem !important; overflow: visible !important;
}
.ik-quote::before { display: none; }
.ik-quote::after {
  content: ''; position: absolute; left: 70px; bottom: -17px; width: 30px; height: 30px; background: var(--surface);
  border-right: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); border-radius: 0 0 8px 0;
}
.ik-quote-inner p { color: var(--text) !important; font-family: var(--font-display); font-size: 1.3rem !important; font-style: normal !important; }
.ik-quote-inner strong { color: var(--ink) !important; }
.ik-q-mark { color: var(--blue) !important; opacity: .5; }
.ik-cta {
  background: var(--blue) !important; border: 2px solid rgba(0, 0, 0, .18) !important; box-shadow: 0 10px 0 rgba(0, 0, 0, .25) !important; padding: 2.2rem 2.5rem !important;
}
.ik-cta h3, .ik-cta p { color: #fff !important; }
.ik-cta h3 { font-family: var(--font-display); font-size: 1.6rem !important; }
.ik-cta .btn-dark { background: #fff; color: var(--ink); border-color: rgba(0, 0, 0, .25); }

/* ═════════ FOOTER ═════════ */
footer {
  background-color: var(--navy) !important; background-image: var(--scales-w) !important; color: rgba(255, 255, 255, .85) !important;
  border-top: 0 !important; text-align: left !important; padding: 5.5rem 6% 2rem !important;
}
footer .ft-say { justify-content: center; margin-bottom: 2.2rem; }
footer .ft-say .bubble { color: var(--text); }
.ft-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; max-width: 1000px; margin: 0 auto; }
.ft-col { display: flex; flex-direction: column; gap: .55rem; }
.ft-col b { font-family: var(--font-display); font-size: 1.15rem; color: var(--sticker); margin-bottom: .3rem; }
.ft-col a { color: rgba(255, 255, 255, .88); text-decoration: none; font-size: .95rem; transition: transform .2s, color .2s; }
.ft-col a:hover { color: #fff; transform: translateX(5px); }
.ft-brand { font-size: 1.5rem !important; color: #fff !important; margin: 0 !important; }
.ft-col p { font-size: .9rem !important; color: rgba(255, 255, 255, .8); }
.ft-small { margin-top: .6rem; }
.ft-copy { max-width: 1000px; margin: 2.4rem auto 0; padding-top: 1.4rem; border-top: 2px dashed rgba(255, 255, 255, .25); font-size: .82rem !important; color: rgba(255, 255, 255, .65) !important; text-align: center; }
@media (max-width: 720px) { .ft-grid { grid-template-columns: 1fr; text-align: center; } .ft-col { align-items: center; } }

/* ═════════ SUB PAGES ═════════ */
.stats-bar .stat-item:nth-child(4n+1) { background: var(--blue); } .stats-bar .stat-item:nth-child(4n+1) * { color: #fff !important; }
.stats-bar .stat-item:nth-child(4n+2) { background: var(--sticker); } .stats-bar .stat-item:nth-child(4n+2) * { color: var(--ink-dark) !important; }
.stats-bar .stat-item:nth-child(4n+3) { background: var(--navy); } .stats-bar .stat-item:nth-child(4n+3) * { color: #fff !important; }
.stats-bar .stat-item { border: 2px solid rgba(0, 0, 0, .15); transform: rotate(-1deg); }
.stats-bar .stat-item:nth-child(even) { transform: rotate(1.2deg); }
.card-medal { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); font-size: 1.6rem !important; }
.student-card .card-score { font-family: var(--font-display); font-size: 2rem !important; }

/* ── refinements ── */
.lev-grid { align-items: end; }
.lev-card:nth-child(n) { margin-top: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.lev-card:nth-child(1) { min-height: 215px; }
.lev-card:nth-child(2) { min-height: 265px; }
.lev-card:nth-child(3) { min-height: 315px; }
.lev-card:nth-child(4) { min-height: 365px; }
@media (max-width: 960px) { .lev-card:nth-child(n) { min-height: 0; } }
.cta-box .peek-eyes { display: none; }
.chat-body { min-height: 300px; }
.ik-card { display: grid !important; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-items: start; }
.ik-card .ik-card-icon { grid-row: 1 / 3; margin: 0; }
.ik-card h3 { grid-column: 2; margin-bottom: .25rem; padding-right: 2.6rem; font-family: var(--font-display); font-size: 1.1rem; }
.ik-card p { grid-column: 2; }

a.c-item.ci-insta { background: #e1306c; color: #fff; border-color: rgba(0, 0, 0, .2) !important; }