/* Words — "kelime defteri" tasarımı: kağıt zemin, mürekkep lacivert, mercan vurgu, fiş kartlar */
:root{
  --murekkep:#0F1B2D;--mer:#FF7A59;--mer-koyu:#E85F3D;--kagit:#F4EEE2;--fis:#FFFCF5;--cizgi:#D9CFBD;--soluk:#6F675B;
  --sari:#FFD966;--yesil:#1F8A5B;--yesil-a:#DDF1E5;--kirmizi:#C8402F;--kirmizi-a:#FBE3DE;--mavi-cizgi:#C9DCEB;
  --golge:3px 3px 0 var(--murekkep);--alt:env(safe-area-inset-bottom);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;color:var(--murekkep);font:16px/1.45 var(--sans);
  background-color:var(--kagit);background-image:radial-gradient(rgba(15,27,45,.09) 1px,transparent 1.2px);background-size:18px 18px}
button{font:inherit;color:inherit;cursor:pointer}
.sayfa{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(100px + var(--alt))}
h1{font:800 34px/1.05 var(--serif);margin:0;letter-spacing:-.5px;font-variation-settings:"opsz" 144}
h3{font:700 19px/1.2 var(--serif);margin:0 0 12px;font-variation-settings:"opsz" 40}
.kucuk{color:var(--soluk);font-size:14px}.orta{text-align:center}

/* üst başlık */
.ust{display:flex;justify-content:space-between;align-items:flex-end;margin:4px 0 20px;gap:12px}
.ust .kucuk{font-size:15px;margin-bottom:2px}
.seri{position:relative;background:var(--sari);border:2px solid var(--murekkep);border-radius:4px;padding:6px 12px 5px;text-align:center;line-height:1;box-shadow:var(--golge);transform:rotate(3deg)}
.seri b{display:block;font:800 26px/1 var(--serif)}.seri span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* kartlar */
.kart{background:var(--fis);border:2px solid var(--murekkep);border-radius:6px;padding:18px;margin-bottom:16px;box-shadow:var(--golge)}
.kart.vurgu{background:var(--murekkep);color:var(--fis)}.kart.vurgu h3{color:var(--sari)}.kart.vurgu p{opacity:.85;margin:0 0 14px}
.kart.buyuk{padding:22px 18px}
.sayilar{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:18px;text-align:center}
.sayilar>div+div{border-left:2px dashed var(--cizgi)}
.sayilar.uc{grid-template-columns:1fr 1fr 1fr;margin:0}
.sayilar b{display:block;font:800 44px/1.05 var(--serif);font-variation-settings:"opsz" 144}.sayilar.uc b{font-size:28px}
.sayilar span{color:var(--soluk);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}

/* düğmeler: basılınca içeri giren */
.dugme{display:block;width:100%;border:2px solid var(--murekkep);border-radius:6px;padding:14px;font-weight:700;font-size:17px;background:var(--fis);box-shadow:var(--golge);transition:transform .06s,box-shadow .06s}
.dugme:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--murekkep)}
.dugme.ana{background:var(--mer);color:var(--murekkep)}
.dugme.ikinci{background:var(--fis)}
.kart.vurgu .dugme{background:var(--mer);border-color:var(--fis);box-shadow:3px 3px 0 var(--fis)}
.dugme.evet{background:var(--yesil);color:#fff}.dugme.hayir{background:var(--kirmizi);color:#fff}
.iki{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.satir{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border:0;border-bottom:1px dashed var(--cizgi);width:100%;background:none;text-align:left}.satir:last-child{border-bottom:0}

/* alt menü: defter sekmeleri */
nav.alt{position:fixed;left:0;right:0;bottom:0;background:var(--fis);border-top:2px solid var(--murekkep);display:flex;justify-content:space-around;padding:0 0 var(--alt);z-index:5}
nav.alt button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:600;color:var(--soluk);padding:9px 4px 8px;position:relative}
nav.alt svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
nav.alt .secili{color:var(--murekkep)}
nav.alt .secili::before{content:"";position:absolute;top:-2px;left:22%;right:22%;height:5px;background:var(--mer);border:2px solid var(--murekkep);border-top:0}

/* oturum */
.oturum{padding-bottom:calc(24px + var(--alt));min-height:100vh;display:flex;flex-direction:column}
.oturum-ust{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.kapat{border:2px solid var(--murekkep);background:var(--fis);width:38px;height:38px;border-radius:6px;font-size:15px;flex:none;box-shadow:2px 2px 0 var(--murekkep)}
.cubuk{flex:1;height:14px;background:var(--fis);border:2px solid var(--murekkep);border-radius:3px;overflow:hidden}
.cubuk i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--mer) 0 6px,var(--mer-koyu) 6px 12px);transition:width .3s}
.cubuk.ince{height:12px;margin:10px 0}
.baslik-s{color:var(--soluk);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;text-align:center;margin:6px 0 10px}
.soru{font:800 44px/1.1 var(--serif);text-align:center;letter-spacing:-.5px;margin:4px 0;word-break:break-word;font-variation-settings:"opsz" 144}
.soru.cumle{font:600 24px/1.4 var(--serif);background:var(--fis);border:2px solid var(--murekkep);border-radius:6px;padding:16px;box-shadow:var(--golge);text-align:left}
.alt-s{text-align:center;color:var(--soluk);margin:8px 0 20px;font-style:italic}
.dinle{display:block;margin:6px auto 22px;width:112px;height:112px;border-radius:50%;border:2px solid var(--murekkep);background:var(--sari);box-shadow:4px 4px 0 var(--murekkep)}
.dinle:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--murekkep)}
.dinle svg{width:50px;height:50px;fill:none;stroke:var(--murekkep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* şıklar: optik form görünümü */
.siklar{display:grid;gap:11px}
.sik{display:flex;align-items:center;gap:12px;border:2px solid var(--murekkep);background:var(--fis);border-radius:6px;padding:12px 14px;font-size:18px;text-align:left;font-weight:500;box-shadow:var(--golge);transition:transform .06s,box-shadow .06s}
.sik:active:not([disabled]){transform:translate(3px,3px);box-shadow:none}
.sik .harf{flex:none;width:30px;height:30px;border:2px solid var(--murekkep);border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--sans)}
.sik.dogru{background:var(--yesil-a)}.sik.dogru .harf{background:var(--yesil);color:#fff;border-color:var(--yesil)}
.sik.yanlis{background:var(--kirmizi-a)}.sik.yanlis .harf{background:var(--kirmizi);color:#fff;border-color:var(--kirmizi)}.sik.yanlis .m{text-decoration:line-through;text-decoration-thickness:2px}
.sik.soluk{opacity:.45;box-shadow:none}
.sik[disabled]{color:var(--murekkep)}
.geri{margin-top:18px;border:2px solid var(--murekkep);border-radius:6px;padding:14px;box-shadow:var(--golge)}
.geri>b{display:inline-block;margin-bottom:10px;padding:3px 8px;border:2px solid currentColor;border-radius:3px;transform:rotate(-2deg);text-transform:uppercase;letter-spacing:1px;font:800 15px/1 var(--serif)}
.geri.iyi{background:var(--yesil-a);color:var(--yesil)}.geri.kotu{background:var(--fis);color:var(--kirmizi)}
.ozet{color:var(--murekkep);font-size:17px}.ozet .k{font:700 20px var(--serif)}
.geri .ornek{background-color:var(--kagit)}
.sabit-alt{position:sticky;bottom:0;padding:14px 0 calc(8px + var(--alt));background:linear-gradient(rgba(244,238,226,0),var(--kagit) 35%)}
.alta{margin-top:auto}

/* kelime fişi: kırmızı kenar çizgili not kağıdı */
.kelimekart{position:relative;background:var(--fis);border:2px solid var(--murekkep);border-radius:6px;padding:18px 18px 18px 32px;margin-bottom:18px;box-shadow:5px 5px 0 var(--murekkep);
  background-image:linear-gradient(90deg,transparent 18px,rgba(200,64,47,.5) 18px,rgba(200,64,47,.5) 20px,transparent 20px)}
.ust-s{display:flex;gap:8px;align-items:center}
.etiket{display:inline-block;border:2px solid var(--murekkep);font-size:12px;font-weight:700;padding:1px 7px;border-radius:3px;letter-spacing:.5px;background:var(--murekkep);color:var(--fis)}
.etiket.acik{background:var(--fis);color:var(--murekkep);border-style:dashed}
.kelime{font:800 46px/1.05 var(--serif);letter-spacing:-.6px;margin:12px 0 10px;word-break:break-word;font-variation-settings:"opsz" 144}.kucuk-k .kelime{font-size:30px}
.telaffuz{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.telaffuz button{border:2px solid var(--murekkep);background:var(--fis);border-radius:4px;padding:5px 9px;font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--murekkep)}
.telaffuz button:active{transform:translate(2px,2px);box-shadow:none}
.telaffuz i{font-style:normal;font-weight:500;color:var(--soluk);margin:0 4px}
.anlam{display:inline;font:700 23px/1.5 var(--serif);background:linear-gradient(transparent 55%,var(--sari) 55%,var(--sari) 92%,transparent 92%);padding:0 3px;margin-left:-3px}
.anlam+*{margin-top:14px}
.bilgi{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed var(--cizgi);font-size:15px}.bilgi span{color:var(--soluk)}.bilgi b{font-weight:600}
.ornek{border-left:4px solid var(--mer);background-image:repeating-linear-gradient(transparent 0 27px,var(--mavi-cizgi) 27px 28px);padding:4px 10px 6px 12px;margin-top:14px;font:500 18px/28px var(--serif);cursor:pointer}
.ornek .tr{color:var(--soluk);font:italic 15px/28px var(--sans)}.ornek .ses{color:var(--mer);font-size:13px}

/* tarama: fiş destesi */
.seviye .satir{border:0;padding:0}.sev{font:800 28px/1 var(--serif)}
.tarama-kart{position:relative;z-index:1;background:var(--fis);border:2px solid var(--murekkep);border-radius:6px;padding:40px 20px;text-align:center;margin:14px 6px 22px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform .2s,background .15s;box-shadow:5px 5px 0 var(--murekkep);touch-action:pan-y}
.deste{position:relative}
.deste::before,.deste::after{content:"";position:absolute;left:6px;right:6px;top:14px;bottom:22px;border:2px solid var(--murekkep);border-radius:6px;background:var(--fis)}
.deste::before{transform:rotate(-3deg) translate(-4px,6px)}.deste::after{transform:rotate(2.5deg) translate(5px,8px)}
.tarama-kart.sag{background:var(--yesil-a)}.tarama-kart.sol{background:var(--kirmizi-a)}
.tarama-kart .kelime{font-size:50px}
.tarama-kart .anlam{font-size:22px}
.goster{border:2px dashed var(--cizgi);background:none;border-radius:4px;padding:8px 14px;color:var(--soluk);font-size:15px;font-weight:600}
.bag{border:0;background:none;color:var(--soluk);margin:16px auto 0;display:block;font-size:15px;font-weight:600;text-decoration:underline}

/* ilerleme */
.buyuk-sayi{text-align:center;margin-bottom:6px}
.buyuk-sayi b{display:block;font:800 72px/1 var(--serif);font-variation-settings:"opsz" 144}
.buyuk-sayi span{color:var(--soluk);font-weight:600}
.grafik{display:flex;gap:8px;height:130px;align-items:flex-end;border-bottom:2px solid var(--murekkep)}
.sutun{flex:1;display:flex;justify-content:center;height:100%}
.cub{width:100%;max-width:30px;height:100%;display:flex;flex-direction:column-reverse}
.cub i{display:block;width:100%}
.cub .d{background:var(--yesil);border:2px solid var(--murekkep);border-bottom:0}.cub .y{background:repeating-linear-gradient(45deg,var(--kirmizi) 0 3px,var(--fis) 3px 6px);border:2px solid var(--murekkep);border-bottom:0}
.cub i.bos{border:0}
.gunler{display:flex;gap:8px;margin:6px 0 10px}.gunler span{flex:1;text-align:center;font-size:12px;color:var(--soluk);font-weight:600}
.nokta{display:inline-block;width:12px;height:12px;border:2px solid var(--murekkep);margin:0 4px 0 10px;vertical-align:-1px}.nokta.d{background:var(--yesil)}.nokta.y{background:repeating-linear-gradient(45deg,var(--kirmizi) 0 2px,var(--fis) 2px 4px)}
.sev-satir{display:grid;grid-template-columns:38px 1fr 46px;align-items:center;gap:10px}.sev-satir b{font:800 18px var(--serif)}.sev-satir span{text-align:right;color:var(--soluk);font-size:14px;font-weight:600}
.tik{cursor:pointer}

/* ayarlar */
.secim{display:flex;border:2px solid var(--murekkep);border-radius:6px;overflow:hidden;margin-bottom:10px;background:var(--fis)}
.secim button{flex:1;border:0;background:none;padding:11px 4px;font-weight:700}.secim button+button{border-left:2px solid var(--murekkep)}
.secim .secili{background:var(--mer)}
.anahtar{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--cizgi)}.anahtar:last-child{border:0}.anahtar small{color:var(--soluk)}
.anahtar input{width:24px;height:24px;accent-color:var(--mer)}
.girdi{width:100%;font-size:16px;padding:13px;border:2px solid var(--murekkep);border-radius:6px;background:var(--fis);margin-bottom:12px;color:var(--murekkep);font-family:var(--sans)}
.girdi:focus{outline:none;box-shadow:var(--golge)}

/* giriş */
.giris{display:flex;flex-direction:column;justify-content:center;min-height:100vh;text-align:center;padding-bottom:40px}
.giris h1{font-size:46px}
.giris form{margin-top:26px;text-align:left}
.logo{width:84px;height:84px;margin:0 auto 16px;border:2px solid var(--murekkep);border-radius:8px;background:var(--mer);font:800 52px/1 var(--serif);display:flex;align-items:center;justify-content:center;box-shadow:5px 5px 0 var(--murekkep);transform:rotate(-4deg)}
.hata{color:var(--kirmizi);font-weight:600}
.bitis{text-align:center;justify-content:center}
.damga{width:130px;height:130px;border-radius:50%;border:3px solid var(--yesil);color:var(--yesil);font:800 20px/1.1 var(--serif);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;transform:rotate(-12deg);letter-spacing:1px;text-transform:uppercase;outline:2px dashed var(--yesil);outline-offset:-11px}
.bitis h1{font-size:40px}
.bitis .dugme{margin-top:26px}

/* pencere, tost */
.perde{position:fixed;inset:0;background:rgba(15,27,45,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:16px}
.pencere{background:var(--kagit);border:2px solid var(--murekkep);border-radius:8px;padding:20px;max-width:520px;width:100%;max-height:85vh;overflow:auto;margin-bottom:var(--alt);box-shadow:5px 5px 0 var(--murekkep)}
.pencere p{color:var(--soluk)}
#tost{position:fixed;left:50%;bottom:calc(92px + var(--alt));transform:translateX(-50%) translateY(20px);background:var(--murekkep);color:var(--fis);padding:10px 18px;border-radius:4px;font-size:14px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:30;white-space:nowrap;box-shadow:3px 3px 0 var(--mer)}
#tost.acik{opacity:1;transform:translateX(-50%)}