:root{--navy:#102a43;--teal:#0d9488;--ink:#1b3548;--muted:#6c8190;--line:#e1ebef;--paper:#f4f8f9}*{box-sizing:border-box}body{margin:0;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--paper)}button{font:inherit}.lesson-top{height:70px;padding:0 max(18px,calc((100vw - 1100px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.back-link{color:#587182;text-decoration:none;font-size:12px;font-weight:800}.lesson-brand{display:flex;align-items:center;gap:9px}.lesson-brand>span{display:grid;place-items:center;width:38px;height:38px;background:#d9f7ef;color:#087e78;border-radius:13px;font-size:24px}.lesson-brand b,.lesson-brand small{display:block}.lesson-brand b{font-size:13px}.lesson-brand small{font-size:10px;color:var(--muted);margin-top:2px}.sound-toggle{border:1px solid var(--line);border-radius:12px;background:white;padding:9px 12px;font-size:12px;font-weight:800;color:var(--navy);cursor:pointer}.lesson-shell{max-width:1050px;margin:24px auto 55px;padding:0 18px}.lesson-intro{background:linear-gradient(115deg,#dff8ef,#e9f3ff 70%,#fff1df);border-radius:24px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#0d8d80}.lesson-intro h1{font-size:clamp(28px,4vw,39px);letter-spacing:-1px;margin:9px 0;color:var(--navy)}.lesson-intro p{font-size:13px;color:#617889;line-height:1.6;max-width:650px;margin:0}.mascot{width:80px;height:80px;flex:0 0 80px;display:grid;place-items:center;background:#ffffffa8;border-radius:24px;font-size:47px;box-shadow:0 10px 25px #102a4310}.sequence-panel{margin:16px 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 19px}.sequence-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.sequence-head b,.sequence-head small{display:block}.sequence-head b{font-size:13px}.sequence-head small{font-size:10px;color:var(--muted);margin-top:3px}.sequence-status{font-size:11px;font-weight:900;color:#0b887e;background:#e2f8f1;border-radius:30px;padding:8px 11px}.sound-sequence{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0 12px}.sound-chip{width:34px;height:34px;border-radius:11px;border:1px solid #e2eaed;background:#f5f8f9;color:#8b9ba5;font-size:13px;font-weight:900;position:relative}.sound-chip.done{background:#d9f7e8;border-color:#a9e8c6;color:#168357}.sound-chip.current{background:#0d9488;border-color:#0d9488;color:#fff;box-shadow:0 4px 12px #0d948844}.sound-chip.locked:after{content:"•";position:absolute;right:2px;top:-5px;font-size:15px}.sequence-progress{height:5px;background:#edf2f3;border-radius:9px;overflow:hidden}.sequence-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0d9488,#a4d96f);transition:width .3s}.lesson-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:22px;box-shadow:0 12px 38px #102a4308}.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 18px;border-bottom:1px solid var(--line)}.step{display:flex;align-items:center;gap:7px;color:#9aa9b2;font-size:11px;font-weight:800}.step i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#eef2f4;font-style:normal;font-size:11px}.step.active{color:#0b887e}.step.active i{background:#d9f7ef;color:#087e78}.step.complete{color:#25875d}.step.complete i{background:#dcf8e8;color:#25875d}.lesson-content{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 4px}.stage-title{font-size:22px;text-align:center;margin:0 0 8px;color:var(--navy)}.stage-hint{font-size:13px;color:var(--muted);text-align:center;line-height:1.6;max-width:620px;margin:0 auto 20px}.sound-display{width:150px;height:150px;border-radius:40px;background:linear-gradient(145deg,#e0fbf3,#effcf9);border:2px solid #c8f0e5;display:grid;place-items:center;font-size:100px;font-weight:900;color:#087e78;box-shadow:0 14px 30px #0d948812}.listen-button{margin-top:19px;border:0;border-radius:14px;background:#0d9488;color:white;padding:13px 20px;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 7px 17px #0d948833}.listen-button:active{transform:scale(.98)}.image-grid{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:12px;width:100%;max-width:730px}.picture-card{min-height:135px;border:2px solid #e4ecef;border-radius:18px;background:#fbfdfd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.16s}.picture-card:hover{border-color:#83d9c8;transform:translateY(-2px)}.picture-card .picture{font-size:43px}.picture-card .picture-name{font-size:12px;font-weight:800;color:#587182}.picture-card.selected{border-color:#0d9488;background:#e7fbf5}.picture-card.good{border-color:#44be83;background:#e4faed}.picture-card.bad{border-color:#e98e86;background:#fff0ef}.question-label{font-size:14px;font-weight:800;text-align:center;color:var(--navy);margin-bottom:17px}.writing-area{width:100%;max-width:680px}.writing-area p{text-align:center;font-size:13px;color:var(--muted)}.writing-board{position:relative;border:2px solid #cbdde2;border-radius:15px;overflow:hidden;background:repeating-linear-gradient(to bottom,#fff 0,#fff 47px,#d5e7eb 48px,#fff 49px);touch-action:none;width:100%;height:245px}.trace-letter{position:absolute;inset:0;display:grid;place-items:center;font-size:180px;font-weight:500;color:#c7d9df;opacity:.75;pointer-events:none;line-height:1}.writing-board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.writing-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.small-btn{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;color:#496577;font-weight:800;font-size:12px;cursor:pointer}.self-check{margin-top:15px;border:0;border-radius:13px;padding:12px 17px;background:#0d9488;color:#fff;font-weight:900;cursor:pointer}.self-check:disabled{opacity:.4;cursor:not-allowed}.lesson-feedback{min-height:28px;text-align:center;font-size:13px;font-weight:900;color:#15835c}.lesson-feedback.error{color:#c54f48}.lesson-footer{border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.lesson-footer span{font-size:11px;color:var(--muted)}.continue-btn{border:0;border-radius:13px;padding:12px 18px;background:#0d9488;color:#fff;font-weight:900;font-size:12px;cursor:pointer}.continue-btn:disabled{background:#e8eef0;color:#a1afb6;cursor:not-allowed}.method-note{text-align:center;color:#82929d;font-size:11px;line-height:1.6;margin:18px auto;max-width:780px}@media(max-width:650px){.lesson-top{padding:0 12px}.back-link{font-size:10px}.lesson-brand b{font-size:11px}.lesson-brand small{font-size:9px}.lesson-shell{padding:0 11px;margin-top:13px}.lesson-intro{padding:22px;align-items:flex-start}.mascot{width:56px;height:56px;flex-basis:56px;border-radius:18px;font-size:32px}.lesson-intro p{font-size:12px}.sequence-panel{padding:14px}.sound-chip{width:30px;height:30px}.lesson-card{padding:14px}.stepper{gap:3px}.step{flex-direction:column;gap:4px;font-size:9px}.step i{width:24px;height:24px}.lesson-content{min-height:300px;padding:20px 0}.image-grid{grid-template-columns:repeat(2,minmax(110px,1fr));gap:9px}.picture-card{min-height:112px}.picture-card .picture{font-size:36px}.writing-board{height:215px}.trace-letter{font-size:150px}.stage-title{font-size:20px}.sequence-head{align-items:flex-start}.sequence-status{white-space:nowrap;font-size:10px}}

.picture-card{padding:8px;cursor:default}.picture-main{width:100%;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:5px}.picture-choices{display:flex;gap:6px;width:100%;margin-top:6px}.answer-btn{flex:1;border:0;border-radius:9px;padding:9px 4px;font-size:11px;font-weight:900;background:#e3f5ee;color:#087e68;cursor:pointer}.answer-btn:last-child{background:#edf2f8;color:#4c6477}.answer-btn:disabled{opacity:.45;cursor:default}.picture-card.good{background:#e4faed;border-color:#44be83}


/* TTKB Dik Temel Abece font family supplied by the school */
@font-face{font-family:"TTKB Dik Temel Abece";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceBody.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbece-Bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece Dot";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceDot.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece Arrow";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceArrow.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece OutBody";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceOutBody.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece OutLine";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceOutLine.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece OutUni";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceOutUni.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TTKB Dik Temel Abece Uni";src:url("/moduller/ilk-okuma-yazma/assets/fonts/TTKBDikTemelAbeceUni.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
/* Use official straight basic letters in all literacy text; decorative practice variants are reserved for writing demonstrations. */
.lesson-body,.lesson-body button,.lesson-body input{font-family:"TTKB Dik Temel Abece", "Trebuchet MS", sans-serif}
.lesson-intro h1,.stage-title,.lesson-brand b{font-family:"TTKB Dik Temel Abece","Trebuchet MS",sans-serif;font-weight:700}
.trace-letter{font-family:"TTKB Dik Temel Abece Dot","TTKB Dik Temel Abece",sans-serif;font-weight:400;color:#b9d2d8;opacity:.8}
.sound-display{font-family:"TTKB Dik Temel Abece","Trebuchet MS",sans-serif;font-weight:400}

.learning-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:15px;align-items:start}.stage-menu{background:#fff;border:1px solid var(--line);border-radius:19px;padding:14px;position:sticky;top:85px}.stage-menu-title{font-size:12px;font-weight:900;color:var(--navy);padding:5px 7px 12px}.stage-menu nav{display:flex;flex-direction:column;gap:6px}.stage-nav-item{display:grid;grid-template-columns:31px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:10px 9px;border:1px solid transparent;border-radius:12px;background:#f7fafb;color:#617888;cursor:pointer}.stage-nav-item .nav-icon{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;background:#eaf0f2;border-radius:9px;font-size:15px}.stage-nav-item span:nth-child(2){font-size:11px;font-weight:900}.stage-nav-item small{font-size:9px;margin-top:3px}.stage-nav-item.active{background:#e2f8f1;border-color:#b9eadb;color:#087e78}.stage-nav-item.active .nav-icon{background:#0d9488;color:#fff}.stage-nav-item.complete{background:#f0fbf4;color:#27875e}.stage-nav-item.complete .nav-icon{background:#d6f6e3;color:#218a58}.stage-nav-item:disabled{cursor:not-allowed;opacity:.65}.stage-lock-note{font-size:10px;color:#82929d;line-height:1.5;margin:14px 5px 4px}.lesson-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px}.lesson-card-head h2{margin:5px 0 0;font-size:22px;color:var(--navy)}.stage-count{white-space:nowrap;font-size:10px;font-weight:900;color:#0b887e;background:#e2f8f1;padding:8px 10px;border-radius:20px}.writing-substage{width:100%;max-width:680px}.writing-substage h3{font-size:15px;color:#0d8278}.substage-divider{height:1px;background:var(--line);margin:20px 0}.writing-substage #unlockUpper:disabled{opacity:.45;cursor:not-allowed}.word-example,.reading-sheet{display:flex;flex-direction:column;align-items:center;gap:8px;background:#f4fbf9;border:1px solid #dcefe9;border-radius:20px;padding:20px;min-width:min(100%,280px)}.word-picture,.reading-illustration{font-size:65px}.word-big{font-size:30px;font-weight:900;color:#0d9488}.syllable-builder{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px}.syllable-piece{border:2px solid #f4d97e;background:#fff0c8;padding:15px 19px;border-radius:14px;font-size:22px;font-weight:900;cursor:pointer}.built-word{min-width:100px;text-align:center;padding:12px;border:2px dashed #b7e6dc;border-radius:13px;color:#0d9488;font-size:22px;font-weight:900}.sentence-result{min-height:38px;font-size:23px;font-weight:900;color:#0d9488;text-align:center;margin:16px}.reading-sheet p{font-size:22px;font-weight:800;margin:3px;color:#27485d}.choice-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.homework-list{width:100%;max-width:540px;display:grid;gap:10px}.homework-list label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#f9fcfc;border-radius:12px;padding:13px;font-size:13px;font-weight:700}.homework-list input{width:18px;height:18px;accent-color:#0d9488}
@media(max-width:760px){.learning-layout{grid-template-columns:1fr}.stage-menu{position:static}.stage-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stage-nav-item{padding:8px 6px;grid-template-columns:27px 1fr;column-gap:6px}.stage-nav-item .nav-icon{width:26px;height:26px}.stage-nav-item span:nth-child(2){font-size:10px}.stage-lock-note{margin-bottom:0}.lesson-card-head h2{font-size:19px}}

.mini-grid{max-width:620px;margin-top:20px;grid-template-columns:repeat(4,minmax(80px,1fr))}.mini-grid .picture-card{min-height:100px}.mini-grid .picture{font-size:34px}.writing-substage{width:100%;max-width:680px}.writing-substage h3{font-size:15px;color:#0d8278}.writing-substage .writing-area{margin:10px auto 0}.writing-substage .substage-divider{height:1px;background:var(--line);margin:22px 0}.writing-substage #unlockUpper:disabled{opacity:.45;cursor:not-allowed}.writing-substage #upperWriting{margin-top:12px}

/* V8: Ses konumu alt aşamaları */
.position-grid{align-items:stretch}.position-card{display:flex;flex-direction:column;align-items:center;gap:8px}.position-options{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%;margin-top:4px}.position-option{display:flex;align-items:center;gap:4px;padding:6px 7px;border:1px solid #dce7eb;border-radius:10px;background:#fff;font-size:12px;cursor:pointer}.position-option input{accent-color:#07998d;width:15px;height:15px}.substage-progress{display:flex;align-items:center;gap:12px;margin:8px 0 14px;color:#078b83;font-size:13px;font-weight:700}.substage-track{height:7px;flex:1;border-radius:99px;background:#e7eff2;overflow:hidden}.substage-track i{display:block;height:100%;background:linear-gradient(90deg,#12b7a7,#70d7b8);border-radius:99px;transition:width .2s}.position-subtitle{margin:12px 0 6px;font-size:20px}.position-card .small-btn{margin:2px 0 4px}.position-card.good{border-color:#16b978;background:#effcf5}.position-card.bad{border-color:#ef8c8c;background:#fff4f4}@media(max-width:650px){.position-options{gap:4px}.position-option{font-size:11px;padding:5px}.position-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V8: Ses konumu alt aşamaları */
.position-grid{align-items:stretch}.position-card{display:flex;flex-direction:column;align-items:center;gap:8px}.position-options{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%;margin-top:4px}.position-option{display:flex;align-items:center;gap:4px;padding:6px 7px;border:1px solid #dce7eb;border-radius:10px;background:#fff;font-size:12px;cursor:pointer}.position-option input{accent-color:#07998d;width:15px;height:15px}.substage-progress{display:flex;align-items:center;gap:12px;margin:8px 0 14px;color:#078b83;font-size:13px;font-weight:700}.substage-track{height:7px;flex:1;border-radius:99px;background:#e7eff2;overflow:hidden}.substage-track i{display:block;height:100%;background:linear-gradient(90deg,#12b7a7,#70d7b8);border-radius:99px;transition:width .2s}.position-subtitle{margin:12px 0 6px;font-size:20px}.position-card .small-btn{margin:2px 0 4px}.position-card.good{border-color:#16b978;background:#effcf5}.position-card.bad{border-color:#ef8c8c;background:#fff4f4}@media(max-width:650px){.position-options{gap:4px}.position-option{font-size:11px;padding:5px}.position-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V9: revisitable sound chips and larger word-picture bank */
.sound-chip.available{border-color:#a6ddd4;background:#e6f8f4;color:#087f75;cursor:pointer}.sound-chip.done{cursor:pointer}.sound-chip:disabled{opacity:.45;cursor:not-allowed}.position-grid .picture-card{min-width:145px}.position-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}.position-option{display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer}.position-option input{accent-color:#0d9488}

/* V12: listening and answering are separate actions */
.listen-select-card{gap:8px;padding:10px;cursor:default;min-height:190px}.card-listen-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #b8d8e2;border-radius:10px;background:#edf8fc;color:#1c6178;padding:8px 13px;font-weight:900;font-size:12px;cursor:pointer}.card-listen-button:hover{background:#dff3fa;border-color:#7fc8db}.card-answer-actions{display:flex;gap:7px;width:100%;margin-top:2px}.card-answer-actions .answer-btn{min-height:35px}.card-answer-actions .answer-no{background:#f1f4f7;color:#4c6477}.listen-select-card .picture-answer{font-size:10px;color:#7a8d98;text-align:center;min-height:14px}.listen-select-card.good .picture-answer{color:#15835c}.listen-select-card.bad .picture-answer{color:#c54f48}

/* V20: tekli ses var/yok seçimi */
.presence-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.presence-options .answer-btn{border:1px solid var(--line,#d8e5e8);background:#fff;border-radius:12px;padding:9px 12px;cursor:pointer;font:inherit}
.presence-options .answer-btn.selected{background:#d9f7ee;border-color:#099989;color:#066d63;box-shadow:0 0 0 2px rgba(9,153,137,.12)}
.presence-card .picture-answer{display:block;min-height:1.3em;margin-top:7px;font-size:.85em}

/* V21: anlamlı sözcük kartı */
.reading-sheet .reading-illustration{font-size:5rem;line-height:1.2;margin:10px auto 18px}
.reading-sheet .reading-word{font-size:1.6rem;font-weight:600;margin:10px 0 20px;color:var(--ink,#123)}
.reading-sheet{max-width:360px;margin:24px auto;padding:24px;text-align:center;background:#f3fbf9;border:1px solid #d5eee8;border-radius:22px}