/* Python Atölyesi — arayüz stili. Özgün tasarım: mor/turkuaz palet, yumuşak kartlar, yeşil-mor yol. */
:root {
  --bg: #0e0f1c; --bg2: #14162a; --kart: #181a31; --kart2: #1f2240; --line: #2a2e52; --line2: #373c68;
  --txt: #eceefb; --soluk-c: #9aa0c8; --accent: #8b6cff; --accent2: #2dd4bf; --accent-d: #6a4fe0;
  --good: #34d399; --yesil: #34d399; --kirmizi: #fb7185; --sari: #fbbf24; --mavi: #38bdf8;
  --gol: 0 10px 30px -12px rgba(0,0,0,.6); --yaricap: 16px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "DejaVu Sans Mono", monospace;
  --ed-bg: #11132a; --ed-gut: #0d0f22; --ed-cur: rgba(139,108,255,.10); --ed-sel: rgba(139,108,255,.35);
  --t-yorum: #6b7299; --t-yazi: #a5e8a0; --t-sayi: #ffb86b; --t-kw: #c4a7ff; --t-fonk: #7dd3fc; --t-sinif: #5eead4; --t-yerlesim: #7dd3fc; --t-self: #fda4af; --t-enj: #fbbf24;
  --u: #8b6cff; --u2: #6a4fe0;
  color-scheme: dark;
}
:root[data-tema="acik"] {
  --bg: #f4f5fb; --bg2: #ffffff; --kart: #ffffff; --kart2: #f0f1fa; --line: #e2e4f2; --line2: #cfd2ea;
  --txt: #1b1d3a; --soluk-c: #6a6f98; --accent: #6d4aff; --accent2: #0fb5a3; --accent-d: #5636e0;
  --good: #12a672; --yesil: #12a672; --kirmizi: #e5484d; --sari: #d98e04;
  --gol: 0 10px 30px -14px rgba(60,60,120,.35);
  --ed-bg: #fbfbff; --ed-gut: #f0f1fa; --ed-cur: rgba(109,74,255,.07); --ed-sel: rgba(109,74,255,.22);
  --t-yorum: #8a8fb5; --t-yazi: #1d8a3a; --t-sayi: #c2570c; --t-kw: #7c3aed; --t-fonk: #0369a1; --t-sinif: #0f766e; --t-yerlesim: #0369a1; --t-self: #be185d; --t-enj: #b45309;
  color-scheme: light;
}
.c-violet { --u: #8b6cff; --u2: #6a4fe0; } .c-teal { --u: #14b8a6; --u2: #0d9488; } .c-amber { --u: #f59e0b; --u2: #d97706; }
.c-rose { --u: #f43f5e; --u2: #e11d48; } .c-sky { --u: #0ea5e9; --u2: #0284c7; } .c-lime { --u: #84cc16; --u2: #65a30d; }
.c-orange { --u: #f97316; --u2: #ea580c; } .c-pink { --u: #ec4899; --u2: #db2777; } .c-indigo { --u: #6366f1; --u2: #4f46e5; } .c-emerald { --u: #10b981; --u2: #059669; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--txt); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.kilit-kaydirma { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; } h1 { font-size: 1.9rem; letter-spacing: -.02em; } h2 { font-size: 1.35rem; letter-spacing: -.01em; } h3 { font-size: 1.1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; } a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.soluk { color: var(--soluk-c); font-size: .9rem; } .gizli { display: none !important; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; } .ic.k { width: 1em; height: 1em; }
::selection { background: var(--ed-sel); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 12px; padding: .65rem 1.1rem; font-weight: 650; background: var(--kart2); color: var(--txt); transition: transform .12s, filter .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ana { background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: 0 8px 20px -8px var(--accent); }
.btn-yesil { background: linear-gradient(135deg, #34d399, #10b981); color: #052e1f; } .btn-kirmizi { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }
.btn-sari { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #3b2500; } .btn-mor { background: rgba(139,108,255,.2); color: var(--accent); }
.btn-gri { background: var(--kart2); border: 1px solid var(--line); } .btn-metin { background: transparent; color: var(--soluk-c); padding: .3rem .6rem; }
.btn-ikon { background: transparent; padding: .5rem; border-radius: 10px; color: var(--soluk-c); } .btn-ikon:hover { background: var(--kart2); color: var(--txt); }
.btn-k { padding: .45rem .8rem; font-size: .88rem; border-radius: 10px; } .btn-buyuk { padding: .85rem 1.6rem; font-size: 1.02rem; border-radius: 14px; } .btn-tam { width: 100%; }
.btn small { opacity: .8; font-weight: 500; margin-left: .2rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--kart2); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; }
.donen { width: 1em; height: 1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: don .7s linear infinite; display: inline-block; margin-right: .5rem; vertical-align: -.15em; }
.donen.buyuk { width: 38px; height: 38px; margin: 1rem auto; color: var(--accent); } @keyframes don { to { transform: rotate(360deg); } }
.kart { background: var(--kart); border: 1px solid var(--line); border-radius: var(--yaricap); padding: 1.2rem 1.3rem; box-shadow: var(--gol); }
.kart-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.mini-etiket, .banner-etiket, .kart-no, .dunya-no { font-size: .72rem; letter-spacing: .12em; font-weight: 800; color: var(--accent2); text-transform: uppercase; }
.halka { position: relative; display: inline-grid; place-items: center; flex: none; } .halka-ic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.halka-ic b { font-size: .95rem; } .halka-ic small { display: block; font-size: .7rem; color: var(--soluk-c); font-weight: 500; }

/* ------------------------------------------------------------ açılış / toast / modal */
#acilis { position: fixed; inset: 0; z-index: 999; background: var(--bg); display: grid; place-items: center; text-align: center; transition: opacity .35s; color: var(--soluk-c); }
#acilis.git { opacity: 0; pointer-events: none; } #acilis .kodi { animation: ziplat 1.2s ease-in-out infinite; } #acilis p { margin-top: .8rem; }
@keyframes ziplat { 50% { transform: translateY(-10px); } }
#toasts { position: fixed; top: 78px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--kart2); border: 1px solid var(--line2); border-left: 4px solid var(--accent); padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--gol); transform: translateX(30px); opacity: 0; transition: .3s; }
.toast.gor { transform: none; opacity: 1; } .toast.t-uyari { border-left-color: var(--sari); } .toast.t-basari { border-left-color: var(--good); }
.toast.t-rozet { border-left-color: var(--sari); background: linear-gradient(135deg, var(--kart2), rgba(251,191,36,.12)); }
#konfeti { position: fixed; inset: 0; z-index: 950; pointer-events: none; display: none; }
.modal-arka { position: fixed; inset: 0; z-index: 800; background: rgba(5,6,18,.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .2s; }
.modal-arka.gor { opacity: 1; }
.modal { background: var(--kart); border: 1px solid var(--line2); border-radius: 20px; padding: 1.5rem; width: min(440px, 100%); box-shadow: var(--gol); transform: scale(.96); transition: transform .2s; }
.modal-arka.gor .modal { transform: none; } .modal h3 { margin-bottom: .5rem; } .modal p { color: var(--soluk-c); }
.modal-alt { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; } .modal-genis { width: min(720px, 100%); max-height: 88vh; overflow: auto; } .modal-genis .kod { margin: 1rem 0 0; }

/* ------------------------------------------------------------ kabuk */
.kabuk { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.yan { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.2rem 1rem; border-right: 1px solid var(--line); background: var(--bg2); }
.logo { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem 1.4rem; } .logo b { display: block; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1; } .logo span { color: var(--accent2); font-weight: 700; font-size: .95rem; }
.nav { display: flex; flex-direction: column; gap: .3rem; }
.nav a { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-radius: 12px; color: var(--soluk-c); font-weight: 600; transition: .15s; } .nav a .ic { width: 1.3em; height: 1.3em; }
.nav a:hover { background: var(--kart); color: var(--txt); } .nav a.aktif { background: linear-gradient(135deg, rgba(139,108,255,.2), rgba(45,212,191,.12)); color: var(--txt); box-shadow: inset 0 0 0 1px var(--line2); } .nav a.aktif .ic { color: var(--accent2); }
.yan-alt { margin-top: auto; } .mini-sv { display: flex; align-items: center; gap: .7rem; background: var(--kart); border: 1px solid var(--line); border-radius: 14px; padding: .7rem; } .mini-sv b { display: block; } .mini-sv span { color: var(--soluk-c); font-size: .8rem; }
.icerik { min-width: 0; display: flex; flex-direction: column; }
.ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.6rem; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ust-bosluk { flex: 1; } .chip b { font-variant-numeric: tabular-nums; } .chip span { color: var(--soluk-c); }
.chip-seri .ic { color: #fb923c; } .chip-seri.aktif { border-color: #fb923c; } .chip-xp .ic { color: var(--sari); } .chip-hedef .ic { color: var(--accent2); }
.sv-kutu { min-width: 190px; } .sv-ad { font-size: .8rem; color: var(--soluk-c); margin-bottom: .25rem; } .sv-ad b { color: var(--txt); }
.sv-bar, .ince-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; } .sv-bar i, .ince-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .6s; }
#sayfa { padding: 1.6rem; outline: 0; flex: 1; animation: gir .3s ease; } @keyframes gir { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ yol */
.yol-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; max-width: 1100px; margin: 0 auto; align-items: start; }
.yol-ana { min-width: 0; } .rail { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1rem; }
.dunya { margin-bottom: 3rem; } .dunya-bas { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.dunya-bas h2 { font-size: 1.7rem; } .dunya-ilerleme { width: 180px; text-align: right; font-size: .85rem; color: var(--soluk-c); } .dunya-ilerleme .ince-bar { margin-bottom: .3rem; }
.unite { margin-bottom: 1.5rem; }
.banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 20px; color: #fff; background: linear-gradient(120deg, var(--u2), var(--u)); position: relative; overflow: hidden; box-shadow: 0 14px 30px -16px var(--u); }
.banner::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); } .banner::before { content: ""; position: absolute; right: 80px; bottom: -80px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.08); }
.banner .banner-etiket { color: rgba(255,255,255,.8); } .banner h3 { font-size: 1.35rem; margin: .1rem 0 .2rem; } .banner p { opacity: .9; font-size: .92rem; max-width: 44ch; } .banner-sag { position: relative; z-index: 1; } .banner .halka-ic b { color: #fff; font-size: .8rem; } .banner .halka circle:first-child { stroke: rgba(255,255,255,.28); }
.yolcu { position: relative; padding: 1.2rem 0 .4rem; } .yol-cizgi { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.yol-bos { fill: none; stroke: var(--line2); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 16; } .yol-dolu { fill: none; stroke: var(--u); stroke-width: 10; stroke-linecap: round; opacity: .85; }
.dugum-satir { height: 112px; display: grid; place-items: center; position: relative; }
.dugum-kap { position: relative; width: 84px; height: 84px; transform: translateX(var(--ox, 0)); display: grid; place-items: center; }
.dugum { width: 78px; height: 78px; border-radius: 50%; border: 0; background: var(--kart2); box-shadow: inset 0 0 0 4px var(--line2), 0 8px 20px -10px #000; display: grid; place-items: center; font-size: 1.9rem; position: relative; transition: transform .18s, box-shadow .18s; }
.dugum:hover:not(.kilitli) { transform: scale(1.08); }
.dugum.acik { box-shadow: inset 0 0 0 4px var(--u), 0 8px 20px -10px #000; }
.dugum.aktif { background: linear-gradient(135deg, var(--u), var(--u2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--u) 30%, transparent), 0 12px 26px -8px var(--u); animation: nabiz 2s infinite; }
.dugum.tamam { background: linear-gradient(135deg, var(--u), var(--u2)); box-shadow: 0 8px 20px -8px var(--u); }
.dugum.kilitli { opacity: .55; cursor: not-allowed; filter: grayscale(.6); font-size: 1.4rem; } .dugum.titre { animation: titre .4s; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--u) 12%, transparent), 0 12px 26px -8px var(--u); } } @keyframes titre { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dugum-tik { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #04281b; display: grid; place-items: center; border: 3px solid var(--bg); } .dugum-tik .ic { width: 14px; height: 14px; stroke-width: 3.5; }
.dugum.tamam .dugum-ikon { filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.basla-balon { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); background: var(--kart); border: 2px solid var(--u); color: var(--u); font-weight: 800; font-size: .72rem; letter-spacing: .1em; padding: .25rem .7rem; border-radius: 10px; animation: ziplat 1.4s infinite; z-index: 2; white-space: nowrap; }
.basla-balon::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; background: var(--kart); border: solid var(--u); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }
.yildizlar { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); color: var(--sari); letter-spacing: 2px; font-size: .85rem; white-space: nowrap; }
.dugum-etiket { position: absolute; top: 50%; transform: translateY(-50%); width: 170px; font-weight: 650; font-size: .92rem; line-height: 1.3; color: var(--txt); } .dugum-etiket small { display: block; color: var(--soluk-c); font-weight: 500; font-size: .75rem; }
.dugum-etiket.sag { left: calc(100% + 16px); } .dugum-etiket.sol { right: calc(100% + 16px); text-align: right; }
.sinav-kart { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.3rem 1.5rem; border-radius: 20px; border: 2px dashed var(--line2); background: var(--kart); margin-top: 1rem; }
.sinav-kart.acik { border-color: var(--sari); background: linear-gradient(120deg, rgba(251,191,36,.1), var(--kart)); } .sinav-kart.gecti { border: 2px solid var(--good); background: linear-gradient(120deg, rgba(52,211,153,.1), var(--kart)); } .sinav-kart.kilitli { opacity: .65; }
.sinav-ikon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--kart2); } .sinav-ikon .ic { width: 28px; height: 28px; } .acik .sinav-ikon { background: var(--sari); color: #3b2500; } .gecti .sinav-ikon { background: var(--good); color: #04281b; }
.sinav-metin h3 { margin: .1rem 0; } .sinav-metin p { color: var(--soluk-c); font-size: .88rem; } .sinav-durum { margin-top: .3rem; color: var(--txt) !important; }
.devam-kart h4 { font-size: 1.15rem; margin: .25rem 0 .9rem; } .kutlama { text-align: center; }
.hedef-satir { display: flex; gap: 1rem; align-items: center; } .hafta { display: flex; justify-content: space-between; margin-top: 1rem; } .hf-gun { text-align: center; font-size: .7rem; color: var(--soluk-c); } .hf-gun i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line2); margin: 0 auto .25rem; } .hf-gun.var i { background: var(--good); border-color: var(--good); color: #04281b; } .hf-gun.bugun span { color: var(--accent2); font-weight: 800; } .hf-gun .ic { width: 14px; height: 14px; stroke-width: 3.5; }
.ipucu-kart { display: flex; gap: .8rem; align-items: center; background: linear-gradient(135deg, rgba(139,108,255,.14), rgba(45,212,191,.08)); } .ipucu-kart p { font-size: .88rem; color: var(--soluk-c); margin-top: .2rem; }

/* ------------------------------------------------------------ içerik biçimleri */
.kod { background: var(--ed-bg); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; margin: .9rem 0; overflow: auto; font-size: .92rem; line-height: 1.6; tab-size: 4; } .kod code { font-family: var(--mono); white-space: pre; }
code { background: var(--kart2); padding: .1em .4em; border-radius: 6px; font-size: .9em; } .kod code, pre code { background: none; padding: 0; }
.t-yorum { color: var(--t-yorum); font-style: italic; } .t-yazi { color: var(--t-yazi); } .t-enj { color: var(--t-enj); } .t-sayi { color: var(--t-sayi); } .t-fonk { color: var(--t-fonk); } .t-sinif { color: var(--t-sinif); } .t-kw { color: var(--t-kw); font-weight: 600; } .t-self { color: var(--t-self); font-style: italic; } .t-yerlesim { color: var(--t-yerlesim); } .t-cagri { color: var(--t-fonk); }
.not { display: flex; gap: .7rem; padding: .8rem 1rem; border-radius: 12px; margin: .9rem 0; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); font-size: .93rem; } .not > .ic { color: var(--sari); margin-top: .2rem; width: 1.3em; height: 1.3em; } .tamam-not { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); } .tamam-not .ic { color: var(--good); }
kbd { background: var(--kart2); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: .05rem .4rem; font-size: .8em; }
ul, ol { padding-left: 1.3rem; margin: .6rem 0; } li { margin: .3rem 0; } h4 { margin: 1.1rem 0 .4rem; font-size: 1.05rem; }

/* ------------------------------------------------------------ editör */
.ed { position: relative; display: flex; height: 100%; min-height: 160px; background: var(--ed-bg); font-family: var(--mono); font-size: var(--ed-fs, 15px); line-height: var(--ed-lh, 23px); overflow: hidden; }
.ed-gutter { flex: none; width: 3.4em; background: var(--ed-gut); color: var(--t-yorum); text-align: right; overflow: hidden; padding: 12px .8em 0 0; user-select: none; border-right: 1px solid var(--line); }
.ed-gutter-in { white-space: pre; will-change: transform; }
.ed-code { position: relative; flex: 1; min-width: 0; }
.ed-hl, .ed-ta { position: absolute; inset: 0; margin: 0; padding: 12px 14px; border: 0; font: inherit; line-height: inherit; letter-spacing: 0; tab-size: 4; white-space: pre; word-wrap: normal; overflow: auto; }
.ed-hl { pointer-events: none; overflow: hidden; color: var(--txt); } .ed-hl code { font: inherit; background: none; padding: 0; }
.ed-ta { background: transparent; color: transparent; caret-color: var(--accent2); resize: none; outline: 0; z-index: 2; -webkit-text-fill-color: transparent; }
.ed-ta::selection { background: var(--ed-sel); -webkit-text-fill-color: transparent; }
.ed-cur { position: absolute; left: 0; right: 0; top: 0; background: var(--ed-cur); pointer-events: none; opacity: 0; z-index: 0; }
.ed-esle { position: absolute; left: 0; top: 0; display: none; border: 1.5px solid var(--accent2); background: rgba(45,212,191,.18); border-radius: 3px; pointer-events: none; z-index: 1; }
.ed.salt .ed-ta { cursor: default; }
.calisma { display: flex; flex-direction: column; gap: .7rem; height: 100%; min-height: 0; }
.calisma-arac { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; } .arac-sol, .arac-sag { display: flex; gap: .5rem; align-items: center; }
.calisma-ed { flex: 1.5 1 0; min-height: 190px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ed-bg); box-shadow: var(--gol); }
.ed-ust { display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; background: var(--ed-gut); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--soluk-c); }
.nokta { width: 11px; height: 11px; border-radius: 50%; } .nokta.r { background: #ff5f57; } .nokta.y { background: #febc2e; } .nokta.g { background: #28c840; }
.ed-dosya { margin-left: .6rem; display: inline-flex; gap: .4rem; align-items: center; font-family: var(--mono); } .ed-durum { margin-left: auto; } .ed-durum.calisiyor { color: var(--accent2); animation: yan 1s infinite; } @keyframes yan { 50% { opacity: .4; } }
.ed-ic { flex: 1; min-height: 0; } .ed-alt { display: flex; justify-content: space-between; padding: .25rem .8rem; font-size: .72rem; color: var(--soluk-c); background: var(--ed-gut); border-top: 1px solid var(--line); }
.calisma-alt { flex: 1 1 0; min-height: 170px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0a0b17; }
:root[data-tema="acik"] .calisma-alt { background: #1b1d3a; color: #eceefb; }
.sekmeler { display: flex; align-items: center; gap: .2rem; padding: .3rem .5rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); } .sekmeler .bosluk { flex: 1; }
.sekme { background: none; border: 0; color: #9aa0c8; padding: .4rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; } .sekme.aktif { background: rgba(139,108,255,.25); color: #fff; }
.sekmeler .btn-metin { color: #9aa0c8; } .sekme-icerik { flex: 1; min-height: 0; overflow: auto; }
.con { height: 100%; overflow: auto; padding: .8rem 1rem; outline: 0; cursor: text; color: #e8e9f7; } .con-pre { margin: 0; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.con-bos { color: #6f7499; font-family: var(--font); } .con-bos kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.con-out { color: #e8e9f7; } .con-err { color: #ff8c9b; } .con-sys { color: #7e83ab; } .con-bad { color: #ffb86b; } .con-echo { color: #5eead4; }
.con-in { display: inline-block; min-width: 3ch; outline: 0; color: #5eead4; border-bottom: 1.5px dashed #5eead4; caret-color: #5eead4; white-space: pre; } .con-in:empty::before { content: " "; }
.con-yorum { margin: .8rem 0; padding: .8rem 1rem; border-radius: 12px; background: rgba(139,108,255,.15); border: 1px solid rgba(139,108,255,.4); color: #eceefb; font-family: var(--font); white-space: normal; } .con-yorum-bas { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.test-ozet { padding: .7rem 1rem; font-weight: 800; position: sticky; top: 0; z-index: 1; } .test-ozet.iyi { background: #0f3a2c; color: #6ee7b7; } .test-ozet.kotu { background: #3a1522; color: #fda4af; }
.test { padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .88rem; } .test-bas { display: flex; align-items: center; gap: .5rem; } .test-bas span { margin-left: auto; font-size: .78rem; } .test.ok .test-bas .ic { color: #34d399; } .test.bad .test-bas .ic { color: #fb7185; }
.test-sat { display: flex; gap: .6rem; margin-top: .35rem; } .test-sat i { flex: none; width: 90px; font-style: normal; color: #9aa0c8; } .test-sat code { background: rgba(255,255,255,.07); color: #e8e9f7; white-space: pre-wrap; word-break: break-word; } .test-hata { margin: .5rem 0 0; padding: .6rem; border-radius: 8px; background: rgba(251,113,133,.12); color: #ffb4be; font-size: .8rem; white-space: pre-wrap; }

/* ------------------------------------------------------------ oynatıcı */
.overlay { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); transition: .25s; }
.overlay.gor { opacity: 1; transform: none; }
.pl-ust { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.4rem; border-bottom: 1px solid var(--line); flex: none; }
.pl-bar { flex: 1; display: flex; gap: 5px; max-width: 760px; margin: 0 auto; } .pl-bar i { flex: 1; height: 9px; border-radius: 9px; background: var(--line); transition: .3s; } .pl-bar i.bitti { background: var(--u); } .pl-bar i.simdi { background: color-mix(in srgb, var(--u) 45%, var(--line)); }
.pl-baslik { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--soluk-c); } .pl-baslik span { font-size: 1.3rem; }
.pl-govde { flex: 1; overflow: auto; padding: 2rem 1.4rem; } .pl-govde.pl-kod { padding: 1rem 1.4rem; overflow: hidden; }
.pl-alt { flex: none; border-top: 1px solid var(--line); background: var(--bg2); padding: .9rem 1.4rem; } .pl-alt-ic { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.adim { max-width: 760px; margin: 0 auto; animation: gir .3s ease; }
.kodi-satir { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.balon { position: relative; background: var(--kart); border: 1.5px solid var(--line2); padding: .8rem 1.1rem; border-radius: 16px; max-width: 460px; } .balon::before { content: ""; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; background: var(--kart); border: solid var(--line2); border-width: 0 0 1.5px 1.5px; transform: translateY(-50%) rotate(45deg); }
.kart-govde { background: var(--kart); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem 1.8rem; box-shadow: var(--gol); border-top: 4px solid var(--u); } .kart-govde h2 { font-size: 1.6rem; margin: .2rem 0 .8rem; } .kart-govde p { margin: .7rem 0; } .kart-no { color: var(--u); }
.soru { font-size: 1.5rem; margin: .4rem 0 1.2rem; }
.secenekler { display: grid; gap: .7rem; } .secenek { display: flex; align-items: center; gap: .9rem; text-align: left; padding: .9rem 1.1rem; background: var(--kart); border: 2px solid var(--line); border-radius: 14px; transition: .15s; } .secenek:hover:not(:disabled) { border-color: var(--line2); background: var(--kart2); }
.secenek kbd { flex: none; } .secenek pre { margin: 0; font-size: .95rem; } .secenek.secili { border-color: var(--accent); background: rgba(139,108,255,.14); } .secenek.dogru { border-color: var(--good); background: rgba(52,211,153,.14); } .secenek.yanlis { border-color: var(--kirmizi); background: rgba(251,113,133,.14); animation: titre .4s; } .secenek:disabled { cursor: default; color: var(--txt); }
.bosluk-in { font: inherit; background: var(--kart2); border: 0; border-bottom: 2px solid var(--accent); border-radius: 6px 6px 0 0; color: var(--t-yazi); padding: 0 .4rem; outline: 0; text-align: center; min-width: 4ch; } .bosluk-in.dogru { border-color: var(--good); } .bosluk-in.yanlis { border-color: var(--kirmizi); }
.sirala-hedef { min-height: 80px; padding: .7rem; border: 2px dashed var(--line2); border-radius: 14px; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .sirala-bank { display: flex; flex-wrap: wrap; gap: .5rem; }
.parca { background: var(--kart); border: 2px solid var(--line); border-radius: 10px; padding: .55rem .9rem; text-align: left; } .parca code { background: none; white-space: pre; } .parca:hover { border-color: var(--accent); } .parca.dogru { border-color: var(--good); background: rgba(52,211,153,.14); } .parca.yanlis { border-color: var(--kirmizi); background: rgba(251,113,133,.14); }
.geribildirim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; transform: translateY(100%); transition: transform .28s; padding: 1.2rem 1.4rem 1.4rem; } .geribildirim.gor { transform: none; }
.geribildirim.iyi { background: #0f3a2c; border-top: 2px solid var(--good); color: #d1fae5; } .geribildirim.kotu { background: #3a1522; border-top: 2px solid var(--kirmizi); color: #ffe4e8; }
:root[data-tema="acik"] .geribildirim.iyi { background: #dcfce7; color: #14532d; } :root[data-tema="acik"] .geribildirim.kotu { background: #ffe4e6; color: #7f1d1d; }
.gb-ic { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; } .gb-metin { flex: 1; } .gb-metin h3 { font-size: 1.3rem; } .gb-metin p { margin-top: .3rem; opacity: .95; font-size: .95rem; } .gb-metin small { font-weight: 600; opacity: .8; }
.gb-dogru code { background: rgba(0,0,0,.25); color: inherit; } .gb-dogru code.cok { display: block; white-space: pre; margin-top: .3rem; padding: .5rem; }
.kod-yerlesim { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: 1.2rem; height: 100%; min-height: 0; }
.gorev-panel { overflow: auto; background: var(--kart); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; } .gorev-ust h2 { margin: .2rem 0 .8rem; } .gorev-md p { margin: .6rem 0; }
.calisma-kap { min-height: 0; min-width: 0; }
.ipucu-kutu { margin-top: .9rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); animation: gir .3s; } .ipucu-bas { display: flex; gap: .4rem; align-items: center; color: var(--sari); } .ipucu-kutu p { margin-top: .3rem; font-size: .93rem; }
.bitis { flex: 1; display: grid; place-items: center; overflow: auto; padding: 2rem 1rem; text-align: center; } .bitis-ic { max-width: 640px; width: 100%; } .bitis h1 { margin: .6rem 0 .2rem; font-size: 2.2rem; } .bitis-alt { color: var(--soluk-c); }
.bitis-kodi .kodi { animation: ziplat 1.1s ease-in-out infinite; }
.yildiz-satir { display: flex; justify-content: center; gap: .6rem; margin: 1.1rem 0; } .yildiz { font-size: 3rem; color: var(--line2); transform: scale(.4); opacity: 0; animation: yildizGel .5s forwards; animation-delay: var(--g); } .yildiz.dolu { color: var(--sari); text-shadow: 0 0 24px rgba(251,191,36,.6); }
@keyframes yildizGel { to { transform: scale(1); opacity: 1; } }
.bitis-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0; } .b-kart { background: var(--kart); border: 1px solid var(--line); border-radius: 14px; padding: .9rem; } .b-kart span { display: block; font-size: .7rem; letter-spacing: .1em; font-weight: 800; color: var(--soluk-c); } .b-kart b { font-size: 1.7rem; } .b-kart small { display: block; color: var(--soluk-c); } .b-kart.sari { border-color: var(--sari); background: rgba(251,191,36,.1); } .b-kart.sari b { color: var(--sari); }
.sv-atla { margin: 1rem 0; padding: .8rem; border-radius: 12px; background: linear-gradient(135deg, rgba(139,108,255,.22), rgba(45,212,191,.15)); border: 1px solid var(--line2); }
.bitis-dugme { display: flex; justify-content: center; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.sonuc-not { margin: .8rem 0; color: var(--soluk-c); } .skor-halka { margin: 1rem 0 .4rem; } .skor-halka .halka-ic b { font-size: 3rem; } .skor-halka .halka-ic small { font-size: 1rem; }
.sonuc-tablo { text-align: left; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 1rem 0; } .sonuc-sat { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--kart); } .sonuc-sat:last-child { border: 0; } .sonuc-sat span { display: block; color: var(--soluk-c); font-size: .85rem; }
.sonuc-puan { font-weight: 800; font-size: 1.2rem; } .sonuc-puan small { color: var(--soluk-c); font-weight: 500; } .sonuc-sat.tam .sonuc-puan { color: var(--good); } .sonuc-sat.sifir .sonuc-puan { color: var(--kirmizi); } .sonuc-sat.kismi .sonuc-puan { color: var(--sari); }
.oneri { text-align: left; margin-top: 1rem; } .sinav-konular { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sinav-giris { text-align: center; } .sinav-giris .kodi-satir { justify-content: center; } .sinav-giris h1 { margin-bottom: 1.2rem; } .sinav-bilgi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.2rem; } .sinav-bilgi div { background: var(--kart); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; } .sinav-bilgi b { display: block; font-size: 2rem; color: var(--accent2); } .sinav-bilgi span { color: var(--soluk-c); font-size: .85rem; }
.sinav-kurallar { text-align: left; background: var(--kart); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1rem 1rem 2.2rem; } .sinav-kurallar .uyari { color: var(--sari); } .sinav-giris .sinav-konular { justify-content: center; margin-top: 1rem; }
.sn-sekmeler { flex: 1; display: flex; gap: .5rem; justify-content: center; } .sn-sekme { background: var(--kart); border: 2px solid var(--line); border-radius: 12px; padding: .4rem 1rem; font-weight: 700; } .sn-sekme small { margin-left: .4rem; color: var(--soluk-c); font-weight: 500; } .sn-sekme.aktif { border-color: var(--accent); background: rgba(139,108,255,.16); }
.sn-sayac { display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; padding: .4rem .9rem; border-radius: 12px; background: var(--kart); border: 1px solid var(--line); font-size: 1.1rem; } .sn-sayac.az { border-color: var(--kirmizi); color: var(--kirmizi); animation: yan 1s infinite; }

/* ------------------------------------------------------------ gelişim / serbest / ayarlar */
.gelisim, .ayarlar, .serbest { max-width: 980px; margin: 0 auto; display: grid; gap: 1.2rem; }
.hero-kart { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 2rem; border-radius: 24px; background: linear-gradient(120deg, rgba(139,108,255,.28), rgba(45,212,191,.16)); border: 1px solid var(--line2); overflow: hidden; } .hero-sol { display: flex; align-items: center; gap: 1.5rem; } .hero-sv b { font-size: 2.2rem; display: block; line-height: 1; } .hero-sv small { font-size: .6rem; letter-spacing: .12em; } .hero-ad { color: var(--accent2); font-weight: 800; font-size: 1.1rem; }
.istat-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; } .istat { background: var(--kart); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; } .istat b { font-size: 1.9rem; display: block; line-height: 1.1; } .istat span { font-weight: 650; font-size: .85rem; } .istat small { display: block; color: var(--soluk-c); font-size: .75rem; }
.grafik { width: 100%; height: auto; } .cub { fill: var(--accent); } .cub-yazi { font-size: 10px; fill: var(--soluk-c); text-anchor: middle; } .cub-gun { font-size: 9px; fill: var(--soluk-c); text-anchor: middle; }
.isi-kap { display: flex; gap: .6rem; overflow-x: auto; } .isi-gunler { display: grid; grid-template-rows: repeat(7, 16px); gap: 4px; font-size: .65rem; color: var(--soluk-c); } .isi { display: flex; gap: 4px; } .isi-sutun { display: grid; grid-template-rows: repeat(7, 16px); gap: 4px; }
i.isi { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--line); } i.h1 { background: #3b3f86; } i.h2 { background: #5b50c9; } i.h3 { background: #7c5cff; } i.h4 { background: var(--accent2); } i.h-yok { background: transparent; }
.tablo { width: 100%; border-collapse: collapse; } .tablo th { text-align: left; font-size: .75rem; color: var(--soluk-c); letter-spacing: .08em; text-transform: uppercase; } .tablo th, .tablo td { padding: .7rem .5rem; border-bottom: 1px solid var(--line); }
.rozet-yesil, .rozet-kirmizi, .rozet-gri { padding: .15rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 700; } .rozet-yesil { background: rgba(52,211,153,.18); color: var(--good); } .rozet-kirmizi { background: rgba(251,113,133,.18); color: var(--kirmizi); } .rozet-gri { background: var(--kart2); color: var(--soluk-c); }
.zor-liste { display: grid; gap: .5rem; } .zor { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .7rem 1rem; border-radius: 12px; background: var(--kart2); border: 1px solid var(--line); } .zor b { flex: 1; } .zor:hover { border-color: var(--accent); }
.rozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; } .rozet { text-align: center; padding: 1rem .6rem; border-radius: 16px; background: var(--kart2); border: 1px solid var(--line); opacity: .55; } .rozet.kazanildi { opacity: 1; background: linear-gradient(160deg, rgba(251,191,36,.14), var(--kart2)); border-color: rgba(251,191,36,.4); } .rozet-ikon { font-size: 2rem; height: 2.6rem; display: grid; place-items: center; } .rozet b { display: block; font-size: .9rem; } .rozet span { font-size: .72rem; color: var(--soluk-c); }
.serbest { height: calc(100vh - 140px); grid-template-rows: auto 1fr; } .serbest-bas { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; } .serbest-govde { min-height: 0; } .secici { display: flex; align-items: center; gap: .6rem; color: var(--soluk-c); font-size: .88rem; }
select, input[type=text] { background: var(--kart2); border: 1px solid var(--line2); border-radius: 10px; padding: .5rem .8rem; outline: 0; } select:focus, input[type=text]:focus { border-color: var(--accent); }
.ayar-grup h3 { margin-bottom: .6rem; } .ayar-satir { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: .9rem 0; border-top: 1px solid var(--line); } .ayar-satir:first-of-type { border-top: 0; } .ayar-satir b { display: block; } .ayar-satir span { color: var(--soluk-c); font-size: .85rem; } .ayar-satir.tehlike b { color: var(--kirmizi); }
.segment { display: inline-flex; background: var(--kart2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; } .segment button { border: 0; background: none; padding: .4rem .9rem; border-radius: 9px; font-weight: 650; color: var(--soluk-c); display: inline-flex; gap: .4rem; align-items: center; } .segment button.aktif { background: var(--accent); color: #fff; }
input[type=range] { accent-color: var(--accent); width: 180px; } .surum { text-align: center; font-size: .8rem; }

/* ------------------------------------------------------------ sertifika */
.sertifika-arka { overflow: auto; } .sertifika-kap { width: min(900px, 100%); }
.sertifika { background: #fffdf6; color: #26224a; border-radius: 6px; padding: 14px; box-shadow: var(--gol); aspect-ratio: 1.414; display: grid; } .sert-cerceve { border: 3px double #b08d3c; padding: 2rem; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.sert-ust { letter-spacing: .35em; font-weight: 800; color: #6a4fe0; font-size: .85rem; } .sertifika h1 { font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; color: #b08d3c; } .sert-ad { font-family: Georgia, serif; font-size: 2.2rem; border-bottom: 2px solid #b08d3c; display: inline-block; align-self: center; padding: 0 2rem; }
.sert-puanlar { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin: .6rem 0; } .sert-puanlar b { display: block; font-size: 1.6rem; color: #6a4fe0; } .sert-puanlar span { font-size: .75rem; color: #6a6f98; } .sert-puanlar .ort b { color: #b08d3c; }
.sert-alt { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: #6a6f98; } .sertifika .kodi { margin: 0 auto; } .sertifika-kap .modal-alt { margin-top: 1rem; }

/* ------------------------------------------------------------ mobil */
@media (max-width: 960px) { .yol-yerlesim { grid-template-columns: 1fr; } .rail { position: static; order: -1; } .istat-izgara { grid-template-columns: repeat(2, 1fr); } .kod-yerlesim { display: flex; flex-direction: column; height: auto; } .gorev-panel { flex: none; overflow: visible; } .pl-govde.pl-kod { overflow: auto; } .calisma-kap { min-height: 520px; } }
@media (max-width: 720px) {
  .kabuk { grid-template-columns: 1fr; padding-bottom: 68px; }
  .yan { position: fixed; z-index: 60; inset: auto 0 0 0; height: auto; flex-direction: row; padding: .4rem; border-right: 0; border-top: 1px solid var(--line); } .logo, .yan-alt { display: none; } .nav { flex-direction: row; width: 100%; justify-content: space-around; } .nav a { flex-direction: column; gap: .15rem; padding: .4rem .8rem; font-size: .7rem; }
  .ust { padding: .6rem 1rem; flex-wrap: wrap; } .chip span { display: none; } .sv-kutu { min-width: 0; } #sayfa { padding: 1rem; }
  .dugum-etiket { width: 120px; font-size: .8rem; } .dugum-etiket.sag { left: calc(100% + 8px); } .dugum-etiket.sol { right: calc(100% + 8px); } .dunya-bas { flex-direction: column; align-items: start; } .dunya-ilerleme { text-align: left; width: 100%; } .sinav-kart { grid-template-columns: 1fr; } .hero-kart { flex-direction: column; text-align: center; } .hero-sol { flex-direction: column; } .hero-kodi { display: none; }
  .pl-ust { padding: .6rem .8rem; } .pl-baslik { display: none; } .pl-alt { padding: .7rem .8rem; } .soru { font-size: 1.2rem; } .bitis-kartlar, .sinav-bilgi { grid-template-columns: 1fr; } .gb-ic { flex-wrap: wrap; } .gb-ic .btn { width: 100%; } .sn-sekme small { display: none; } .ayar-satir { flex-direction: column; align-items: start; } .serbest { height: auto; }
  .pl-alt-ic .soluk { display: none; } .pl-alt-ic { justify-content: flex-end; } .kodi-satir .kodi { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  body.sert-yazdir > *:not(.sertifika-arka) { display: none !important; }
  body.sert-yazdir .sertifika-arka { position: static; background: #fff; padding: 0; display: block; opacity: 1; backdrop-filter: none; }
  body.sert-yazdir .modal-alt { display: none; } body.sert-yazdir .sertifika { box-shadow: none; } @page { size: A4 landscape; margin: 10mm; }
}

/* ---- iOS / PWA uyumu ---- */
html { -webkit-text-size-adjust: 100%; }
@supports (padding: env(safe-area-inset-top)) {
  .ust { padding-top: calc(.6rem + env(safe-area-inset-top)); }
  .overlay { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  #toasts { top: calc(78px + env(safe-area-inset-top)); }
  @media (max-width: 720px) {
    .yan { padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); }
    #sayfa { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  }
}
@media (max-width: 720px) { textarea, input, select, [contenteditable] { font-size: 16px; } }
/* ---- Her ekran boyutu (iPhone, Samsung/Android, iPad, katlanabilir) için taşma ve yerleşim düzeltmeleri ---- */
html, body { max-width: 100%; overflow-x: hidden; }
.gelisim, .ayarlar, .serbest { grid-template-columns: minmax(0, 1fr); }
.gelisim > *, .ayarlar > *, .serbest > *, .yol-yerlesim > *, .kod-yerlesim > *, .ust > * { min-width: 0; }
svg, img, canvas, video { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.yan { height: 100vh; height: 100dvh; }
.overlay { height: 100vh; height: 100dvh; bottom: auto; }
.gorev-toggle { display: none; }
@media (max-width: 960px) {
  .ust { flex-wrap: wrap; } .sv-kutu { min-width: 0; flex: 1 1 160px; }
  .kod-yerlesim { gap: .8rem; }
  .gorev-panel { position: sticky; top: 0; z-index: 6; max-height: 34vh; max-height: 34dvh; overflow: auto; padding: .9rem 1rem; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
  .gorev-ust { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
  .gorev-ust h2 { margin: 0; font-size: 1.05rem; flex: 1 1 140px; min-width: 0; }
  .gorev-ust .kart-no { flex: none; }
  .gorev-toggle { display: inline-flex; margin-left: auto; padding: .35rem .7rem; font-size: .78rem; border-radius: 999px; background: var(--kart2, var(--line)); color: var(--txt); border: 1px solid var(--line2); cursor: pointer; }
  .gorev-panel.kapali { max-height: none; overflow: visible; }
  .gorev-panel.kapali .gorev-md, .gorev-panel.kapali .ipuclari, .gorev-panel.kapali .not { display: none; }
}
@media (max-width: 720px) {
  .nav a { flex: 1 1 0; min-width: 0; padding: .4rem .15rem; }
  .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
  .nav a { font-size: .62rem; } .nav a .ic { width: 1.15em; height: 1.15em; }
  #sayfa { padding: .8rem; } .dugum-etiket { width: 100px; font-size: .75rem; }
}
@media (max-width: 330px) { .nav a span { display: none; } }