/* Classroom materials: generated plaster, painted wood, paper and a felt noticeboard. */
:root{--paper:#dfddd2;--line:#b7b9a7;--muted:#576273;--radius:17px}
body{background:#d7d3c8 url('sinif-duvar-dokusu.webp') repeat;background-size:650px;color:#001351}
body::before{content:'';position:fixed;z-index:-1;inset:52% 0 0;background:linear-gradient(#71877777,#71877777),url('sinif-duvar-dokusu.webp') repeat;border-top:9px solid #9aa28b;box-shadow:0 -2px 0 #b6b9a6,0 -5px 0 #89967d;background-size:auto,650px;pointer-events:none}
.wrap{max-width:1260px;padding:0 40px}
header{border-color:#90957d77}header .brand{filter:drop-shadow(0 1px 0 #ffffff66)}
nav{gap:22px}nav a{font-size:12px}nav a:hover{text-decoration:underline;text-underline-offset:5px}
.classroom-location{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:26px}
.room-plaque{background:#243f39;color:#edece0;display:flex;align-items:center;gap:15px;padding:11px 24px;border:2px solid #bdb190;box-shadow:0 2px 5px #283f3022;font-size:10px;letter-spacing:1.2px;border-radius:3px;position:relative}
.room-plaque::before,.room-plaque::after{content:'−';position:absolute;font-size:9px;color:#bbae8e;top:50%;transform:translateY(-50%)}.room-plaque::before{left:5px}.room-plaque::after{right:5px}
.room-plaque b{font:700 26px Manrope,Arial;letter-spacing:-1px}.room-plaque span{border-left:1px solid #a5b2a166;padding-left:14px;line-height:1.7}
.focus-toggle{background:#f4f2e2bd;border:1px solid #76877770;border-radius:30px;padding:10px 14px;font-size:11px;display:inline-flex;gap:7px;align-items:center}.focus-toggle[aria-pressed=true]{background:var(--navy);color:white}
.hero.classroom-board{margin-top:21px;box-shadow:inset 0 0 0 2px #151715,inset 0 0 60px #0003,0 7px 0 -3px #857766,0 18px 25px #25291b25}
.ribbon{border:0;margin:30px 0;padding:18px 24px;background:#eeeddfd9;box-shadow:0 3px 9px #29382110;position:relative;border-radius:2px}
.ribbon::before,.ribbon::after{content:'';width:51px;height:17px;background:#e9e2bc88;position:absolute;top:-7px;transform:rotate(-6deg)}.ribbon::before{left:20px}.ribbon::after{right:20px;transform:rotate(6deg)}
#masa{background-color:#b69c78;background-image:repeating-linear-gradient(1deg,#81644405 0px,#e6cb9b15 2px,#92765212 4px,transparent 7px,transparent 21px);border:1px solid #927959;border-top:4px solid #ceb58e;border-radius:11px;padding:28px;box-shadow:0 9px 0 -5px #816b51,0 17px 24px #263e2420;scroll-margin-top:24px}
#masa>.section-head .eyebrow{color:#4d4432}#masa>.section-head h2{color:#24372e}#masa .tag{background:#f0ead9;color:#4c4e3d}
#masa .study-grid{gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#masa .study-grid>.panel{border-radius:5px 7px 5px 9px;background:#eff0e3;border:1px solid #c6c5ac;box-shadow:0 4px 10px #5b452015;padding:21px}
#masa .video{border-radius:8px}#masa .rollcall-bar>span{color:#3e4638}#masa .rollcall-live{color:#25421e}#masa .rollcall-event{color:#273e2d}#masa .rollcall-demo span{color:#374132}#masa .rollcall-demo button{color:#001351}
.attendance-paper{box-shadow:4px 5px 0 -1px #e2dfcc,4px 5px 0 0 #a28e69,0 10px 25px #4b3a2422;border-color:#d3c9aa}
.room-window{position:relative;isolation:isolate;margin:36px 0;min-height:250px;overflow:hidden;border:7px solid #746754;border-radius:5px;background:#3f4535;box-shadow:inset 0 0 0 1px #a8997c,0 7px 15px #29371f1a;display:flex;align-items:end}
.room-window>img,.room-window>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%;z-index:-2}
.room-window::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#14211912 30%,#102017d4 100%)}
.room-window-copy{padding:30px 32px;margin-left:auto;width:48%;color:#fff}
.room-window-copy>span{font-size:9px;letter-spacing:1.7px;color:#d2d8c9}.room-window h2{font:500 39px/1.06 'Caveat',cursive;margin:9px 0 18px}.room-window button{border:1px solid #eeeee58c;background:#18282070;border-radius:5px;color:#fff;padding:9px 12px;font-size:11px}.room-window small{display:block;font-size:9px;line-height:1.5;color:#d3d6c5;margin-top:12px}
.archive-board{background:#344d40;border:7px solid #7b6e57;border-radius:7px;padding:29px 28px 22px;color:#eef0e2;box-shadow:inset 0 0 0 2px #24382d,0 6px 0 -3px #9a8b6f,0 13px 25px #1e302023;position:relative;scroll-margin-top:24px}
.archive-board::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:url('sinif-duvar-dokusu.webp');background-size:500px;mix-blend-mode:soft-light}
.archive-board>*{position:relative}.archive-board>.section-head{align-items:center;margin-bottom:22px}.archive-board .eyebrow{color:#bacead;font-size:10px}.archive-board h2{font:500 42px/1.1 'Caveat',cursive;margin-top:8px}.archive-board .archive-heading-note{font-size:12px;color:#d4deca;line-height:1.6;max-width:240px}
.archive-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap}.archive-filters{display:flex;gap:7px;flex-wrap:wrap}.archive-filters button{font-size:11px;color:#e8eddf;border:1px solid #aabca277;border-radius:25px;background:transparent;padding:9px 12px}.archive-filters button[aria-pressed=true]{background:#e3ebcb;border-color:#e3ebcb;color:#243b2b;font-weight:700}
.archive-search{position:relative;display:flex;align-items:center}.archive-search span{position:absolute;left:12px;color:#cad6bd;font-size:18px}.archive-search input{width:173px;min-width:0;background:#20382b;border:1px solid #aabca266;border-radius:7px;padding:9px 11px 9px 33px;font-size:12px;color:#fff}.archive-search input::placeholder{color:#b6c6aa}.archive-board :is(a,button,input):focus-visible{outline:3px solid #f0f2df;outline-offset:4px}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px}.archive-card{position:relative;background:#f1efdf;padding:10px 10px 14px;color:var(--navy);border-radius:2px;box-shadow:0 4px 8px #14201744;transition:transform .18s,box-shadow .18s;min-width:0}
.archive-card:hover{transform:translateY(-4px);box-shadow:0 9px 13px #14201755}.archive-card::before{content:'';position:absolute;top:-7px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#c0c56d;border:1px solid #e1e4ac;box-shadow:0 3px 2px #0b1b1944;z-index:2}.archive-card:nth-child(3n+2)::before{background:#b88470;border-color:#d5a493}
.archive-thumb{display:block;aspect-ratio:16/9;position:relative;overflow:hidden;background:#17263b;color:white;isolation:isolate}.archive-thumb img{width:100%;height:100%;object-fit:cover;display:block}.archive-duration{position:absolute;right:6px;bottom:6px;color:white;background:#08151bdd;padding:3px 6px;border-radius:3px;font-size:10px}.archive-play{position:absolute;inset:0;display:grid;place-items:center;background:#00135113}.archive-play b{width:37px;height:37px;display:grid;place-items:center;background:#fffef0ee;color:#1d392e;border-radius:50%;font-size:15px;box-shadow:0 2px 7px #0003}
.archive-card-head{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 7px;font-size:9px;letter-spacing:1px;color:#697157}.archive-card-head strong{color:#354b35;font-size:10px}.archive-card h3{font-size:14px;line-height:1.45;letter-spacing:-.3px;margin:0 2px 5px}.archive-card p{font-size:10px;color:#68765d;margin:0 2px 13px}.archive-card-actions{display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid #d3d7c1;margin:0 2px;padding-top:10px}.archive-card-actions button{font-size:11px;font-weight:700;background:none;border:0;padding:3px 0;color:#001351}.archive-card-actions a{font-size:10px;color:#52604b;text-decoration:none}.archive-card-actions a:hover{text-decoration:underline}.archive-card button:focus-visible,.archive-card a:focus-visible{outline-color:var(--navy)}
.archive-empty{padding:36px 15px;text-align:center;border:1px dashed #9bae8c;color:#e2e9d5;font-size:13px}.archive-foot{display:flex;justify-content:space-between;gap:15px;margin-top:23px;align-items:center;font-size:10px;color:#c2d0b8;line-height:1.7}.archive-foot a{color:#edf1e3;text-underline-offset:4px;white-space:nowrap}
.archive-modal{width:min(840px,calc(100% - 28px));max-width:840px;padding:23px;background:#f2f0e5}.archive-modal h2{font-size:23px;padding-right:20px}.archive-modal .archive-player{aspect-ratio:16/9;background:#13251b;margin:18px 0 14px;border-radius:8px;overflow:hidden}.archive-player iframe{display:block;width:100%;height:100%;border:0}.archive-modal .archive-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:15px}.archive-modal .archive-modal-footer p{font-size:11px}.archive-modal .archive-modal-footer a{font-size:12px;white-space:nowrap;color:#1639bf}
#siralama{padding:28px;background:#dce1ce;border:1px solid #a9b59a;border-top:4px solid #ecebdc;box-shadow:0 9px 20px #213e2720;position:relative;margin:42px 0}#siralama::before{content:'';width:72px;height:22px;background:#d1c795a8;position:absolute;top:-12px;left:calc(50% - 36px);transform:rotate(-3deg)}#siralama .leader{border-radius:5px 5px 17px 5px;border:1px solid #d7d8c5;background:#e6e7da;box-shadow:0 3px 7px #3b493313}#siralama .leader.first{background:#e4ecbf}#siralama .leader.third{background:#e7d8bd}#siralama .crown{border-color:#dce1ce}.bottom-grid>.panel{background:#eeeddf;border-color:#b4baa3;border-radius:6px 6px 18px 6px;box-shadow:0 4px 10px #29382114}footer{color:#354533;border-top:1px solid #6f84665c}
body.focus-mode{background:#e3e8dc}body.focus-mode::before{display:none}body.focus-mode .room-window{display:none}body.focus-mode #masa{background:#dce3d3;border-color:#b7c2aa;box-shadow:none}body.focus-mode .ribbon::before,body.focus-mode .ribbon::after{display:none}
@media(max-width:1000px){.wrap{padding:0 30px}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.archive-board{padding:25px 22px}.archive-heading-note{max-width:190px!important}#masa{padding:23px}#masa .study-grid{gap:20px}#masa .study-grid>.panel{padding:17px}.room-window-copy{width:51%;padding:25px}.room-window h2{font-size:35px}nav{gap:15px}}
@media(max-width:850px){header{gap:14px}.brand{width:160px}.archive-controls{align-items:start}.archive-search input{width:155px}.room-window{min-height:240px}.room-window-copy{width:52%}.classroom-location{margin-top:21px}}
@media(max-width:600px){.wrap{padding:0 16px}header .brand{width:140px}.room-plaque{padding:8px 17px;gap:10px;font-size:8px;letter-spacing:.7px}.room-plaque b{font-size:22px}.room-plaque span{padding-left:10px}.focus-toggle{padding:9px 10px;font-size:10px}.ribbon{padding:17px 15px;gap:12px;margin:26px 0}.ribbon>div{width:100%}.ribbon span{font-size:10px}#masa{padding:19px 13px;border-radius:7px}#masa>.section-head{padding:0 4px}#masa .section-head h2{font-size:25px}#masa .study-grid>.panel{padding:15px}.room-window{min-height:295px;border-width:5px;margin:27px 0}.room-window::after{background:linear-gradient(180deg,#14211900 15%,#102017dc 100%)}.room-window>img,.room-window>video{object-position:36% 50%}.room-window-copy{width:100%;padding:25px 21px;margin-top:72px}.room-window h2{font-size:34px;max-width:235px;margin-bottom:14px}.room-window small{margin-top:9px}.archive-board{border-width:5px;padding:22px 16px 19px}.archive-board>.section-head{gap:10px}.archive-board h2{font-size:37px}.archive-board .archive-heading-note{max-width:none!important;font-size:11px}.archive-controls{gap:13px;margin-bottom:23px}.archive-filters{gap:5px}.archive-filters button{font-size:10px;padding:8px 10px}.archive-search{width:100%}.archive-search input{width:100%;font-size:16px}.archive-grid{grid-template-columns:1fr;gap:25px}.archive-card{padding:11px 11px 15px}.archive-card h3{font-size:16px}.archive-card p,.archive-card-actions a{font-size:11px}.archive-card-actions button{font-size:12px}.archive-foot{align-items:start;flex-direction:column;gap:9px}.archive-modal{padding:20px 15px}.archive-modal h2{font-size:19px}.archive-modal .archive-modal-footer{align-items:start;flex-direction:column;gap:9px}#siralama{padding:24px 13px;margin:34px 0}#siralama .section-head{padding:0 3px}.room-plaque span{max-width:96px}.classroom-location{gap:9px}}
@media(prefers-reduced-motion:reduce){.archive-card{transition:none}.archive-card:hover{transform:none}}

@media(max-width:760px){#masa .study-grid{grid-template-columns:1fr}}