/* 🇹🇷 Atatürk Köşesi (ataturk-kose.js) — ak-* ; sıcak kâğıt zemin, bayrak kırmızısı + altın ayrıntı */
.ak-kok { position: fixed; inset: 0; z-index: 9000; overflow-y: auto; overscroll-behavior: contain; color: #2b1d17;
  background: radial-gradient(circle at 100% 0, #e30a1714 0, transparent 38%), linear-gradient(#fbf7f0, #f4ecdf); font-family: inherit; -webkit-user-select: none; user-select: none; }
.ak-kok.ak-cocuk { font-family: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
.ak-kok * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ak-kok [hidden] { display: none !important; }
.ak-kok button { font: inherit; color: inherit; cursor: pointer; }
body.ak-acik { overflow: hidden; }
.ak-yukleniyor { display: grid; place-items: center; height: 100%; } .ak-yukleniyor svg { width: 84px; animation: ak-nabiz 1.2s ease-in-out infinite; }
@keyframes ak-nabiz { 50% { transform: scale(.9); opacity: .7; } }
.ak-ust { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: #fbf7f0e6; backdrop-filter: blur(8px); }
.ak-ust b { flex: 1; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-geri { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 14px; background: #fff; font-size: 26px; line-height: 1; box-shadow: 0 3px 0 #2b1d1714; }
.ak-no { font-size: 14px; font-weight: 700; color: #8a6d5a; }

.ak-sayfa-ana { max-width: 560px; margin: 0 auto; padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.ak-kahraman { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 26px; color: #fff; margin-bottom: 14px;
  background: radial-gradient(circle at 85% 20%, #ffffff26 0, transparent 40%), linear-gradient(135deg, #e30a17, #a50711); box-shadow: 0 12px 30px #a5071140; }
.ak-kahraman > svg { width: 74px; flex-shrink: 0; border-radius: 16px; box-shadow: 0 0 0 3px #ffffff55; }
.ak-kahraman h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 26px; letter-spacing: .01em; color: inherit; }   /* genel h1 { color:var(--navy) } kırmızı kartta lacivert/mor başlık bırakıyordu (2.05; çocukta 1.5) */
.ak-cocuk .ak-kahraman h1 { font-family: inherit; font-size: 28px; }
.ak-kahraman p { margin: 4px 0 8px; font-size: 14px; line-height: 1.4; opacity: .92; }
.ak-sayac { display: block; height: 7px; border-radius: 6px; background: #ffffff40; overflow: hidden; } .ak-sayac i { display: block; height: 100%; background: #f5d27a; border-radius: 6px; }
.ak-kahraman small { font-size: 12px; opacity: .9; }
.ak-sekme { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: #eadfce; border-radius: 18px; margin-bottom: 14px; }
.ak-sekme button { border: 0; border-radius: 14px; padding: 10px; background: none; font-weight: 800; font-size: 15px; color: #7a5b48; }
.ak-sekme button.on { background: #fff; color: #c8102e; box-shadow: 0 3px 8px #2b1d1714; }
.ak-sekme i { font-style: normal; font-size: 12px; background: #c8102e14; border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.ak-liste { display: grid; gap: 10px; }
.ak-oge { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; border-radius: 20px; padding: 8px; background: #fff; text-align: left; box-shadow: 0 4px 0 #2b1d170f, 0 6px 16px #2b1d170a; }
.ak-oge:active { transform: translateY(2px); }
.ak-foto { position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #e30a17, #a50711); display: grid; place-items: center; }
.ak-foto svg { width: 54%; } .ak-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ak-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ak-tx b { font-size: 17px; line-height: 1.2; } .ak-tx small { font-size: 14px; color: #7a5b48; }
.ak-etiket { display: flex; gap: 6px; margin-top: 4px; } .ak-etiket i { font-style: normal; font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 8px; background: #f3e7d3; color: #8a6d5a; }
.ak-etiket i.ok { background: #e3f5e8; color: #1e8a44; }
.ak-oge.okundu .ak-foto::after { content: "✓"; position: absolute; z-index: 2; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; background: #1e8a44; color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }

.ak-okuyucu { max-width: 560px; margin: 0 auto; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; flex-direction: column; gap: 12px; }
.ak-sahne { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #e30a17, #a50711); box-shadow: 0 10px 24px #2b1d1726; }
.ak-sahne svg { width: 26%; opacity: .95; }
.ak-sahne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; animation: ak-kenburns 18s ease-in-out infinite alternate; }
@keyframes ak-kenburns { to { transform: scale(1.08) translate(-1.5%, -1%); } }
.ak-sahne.kucuk { width: 100%; max-width: 360px; margin: 0 auto; }
.ak-ilerleme { display: flex; gap: 5px; } .ak-ilerleme i { flex: 1; height: 5px; border-radius: 4px; background: #e2d4bf; } .ak-ilerleme i.on { background: #c8102e; }
.ak-kagit { background: #fffdf8; border-radius: 22px; padding: 20px 18px 14px; box-shadow: 0 4px 0 #2b1d170d, inset 0 0 0 1px #eadfce; }
.ak-cumle { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.55; }
.ak-cocuk .ak-cumle { font-family: inherit; font-size: 27px; font-weight: 700; line-height: 1.45; }
.ak-w { border: 0; background: none; padding: 0 1px; border-radius: 6px; transition: background .15s, color .15s; }
.ak-w.okunan { background: #f5d27a; }
.ak-w.secili { background: #c8102e; color: #fff !important; box-shadow: 0 3px 0 #8f0b1d; }
.ak-tr { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #e2d4bf; font-size: 17px; line-height: 1.45; color: #6b4f3f; }
.ak-ipucu { margin: 10px 0 0; font-size: 12px; color: #a08672; }
.ak-arac { display: flex; gap: 10px; }
.ak-arac button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 16px; padding: 11px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 #2b1d1714; }
.ak-arac svg { width: 20px; height: 20px; color: #c8102e; }
.ak-alt { display: flex; gap: 10px; }
.ak-ok { width: 58px; flex-shrink: 0; border: 0; border-radius: 18px; background: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 4px 0 #2b1d1714; }
.ak-ok:disabled { opacity: .35; }
.ak-ileri, .ak-buyuk { flex: 1; border: 0; border-radius: 18px; padding: 15px; background: #c8102e; color: #fff !important; font-weight: 800; font-size: 18px; box-shadow: 0 5px 0 #8f0b1d; }
.ak-ileri:active, .ak-buyuk:active, .ak-ok:active { transform: translateY(3px); box-shadow: 0 2px 0 #8f0b1d; }
.ak-ince { border: 0; background: none; padding: 10px; font-weight: 800; color: #8a6d5a; }
.ak-balon { position: fixed; z-index: 9100; background: #2b1d17; color: #fff; border-radius: 14px; padding: 7px 14px; display: flex; flex-direction: column; align-items: center; min-width: 88px; pointer-events: none; box-shadow: 0 8px 20px #2b1d1755; }
.ak-balon::after { content: ""; position: absolute; bottom: -7px; left: 50%; translate: -50% 0; border: 7px solid transparent; border-bottom: 0; border-top-color: #2b1d17; }
.ak-balon b { font-size: 13px; opacity: .7; } .ak-balon span { font-size: 20px; font-weight: 800; color: #f5d27a; }
.ak-balon.acil { animation: ak-balon .22s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ak-balon { from { transform: scale(.6) translateY(8px); opacity: 0; } }
.ak-bitti { max-width: 460px; margin: 0 auto; padding: 8px 20px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ak-bitti h2 { margin: 0; font-family: Georgia, serif; font-size: 26px; } .ak-cocuk .ak-bitti h2 { font-family: inherit; }
.ak-bitti p { margin: 0; color: #7a5b48; } .ak-bitti .ak-buyuk { width: 100%; flex: none; }
.ak-yildiz { font-size: 54px; line-height: 1; color: #d4a437; text-shadow: 0 4px 0 #b8903f55; animation: ak-yildiz .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes ak-yildiz { from { transform: scale(0) rotate(-90deg); } }
.ak-kaynak { font-size: 13px; color: #a08672; }