@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&display=swap');

:root {
    --bg: #f4f3ff;
    --bg-yukselti: #ffffff;
    --fg: #201c3a;
    --fg-soluk: #66618a;
    --vurgu: #6c5ce7;
    --vurgu-koyu: #4d3fc4;
    --vurgu2: #ff5f8f;
    --vurgu3: #00c9a7;
    --iyi: #00c9a7;
    --zayif: #ff5f5f;
    --kenarlik: #e4e0fb;
    --golge: 0 2px 14px rgba(76, 63, 196, 0.08);
    --golge-belirgin: 0 10px 32px rgba(76, 63, 196, 0.18);
    --yuvarlaklik: 18px;
    color-scheme: light;
}

:root[data-tema="karanlik"] {
    --bg: #16132b;
    --bg-yukselti: #201c3f;
    --fg: #f1eeff;
    --fg-soluk: #b2acd6;
    --vurgu: #9b8cff;
    --vurgu-koyu: #b3a6ff;
    --vurgu2: #ff85ab;
    --vurgu3: #3fe0c1;
    --iyi: #3fe0c1;
    --zayif: #ff7a7a;
    --kenarlik: #322c58;
    --golge: 0 2px 14px rgba(0, 0, 0, 0.3);
    --golge-belirgin: 0 10px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --bg: #16132b;
        --bg-yukselti: #201c3f;
        --fg: #f1eeff;
        --fg-soluk: #b2acd6;
        --vurgu: #9b8cff;
        --vurgu-koyu: #b3a6ff;
        --vurgu2: #ff85ab;
        --vurgu3: #3fe0c1;
        --iyi: #3fe0c1;
        --zayif: #ff7a7a;
        --kenarlik: #322c58;
        --golge: 0 2px 14px rgba(0, 0, 0, 0.3);
        --golge-belirgin: 0 10px 32px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    background-image: radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--vurgu) 10%, transparent) 0%, transparent 40%),
                       radial-gradient(circle at 95% 15%, color-mix(in srgb, var(--vurgu2) 10%, transparent) 0%, transparent 35%);
    background-attachment: fixed;
    color: var(--fg);
    font-family: 'Nunito', system-ui, sans-serif;
    margin: 0;
    line-height: 1.5;
    transition: background 0.2s ease, color 0.2s ease;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -0.01em; }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-yukselti);
    border-bottom: 1px solid var(--kenarlik);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
    gap: 0.75rem;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
    background: linear-gradient(120deg, var(--vurgu), var(--vurgu2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
header h1::before { content: "⚡ "; -webkit-text-fill-color: initial; }

nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
nav a, nav button, #tema-degistir {
    color: var(--fg-soluk);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
nav a:hover, nav button:hover, #tema-degistir:hover { background: var(--kenarlik); color: var(--vurgu-koyu); }

main { padding: 1.5rem; max-width: 960px; margin: 0 auto; }

.kart {
    background: var(--bg-yukselti);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlaklik);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--golge);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kart:hover { box-shadow: var(--golge-belirgin); transform: translateY(-2px); }

.hero {
    background: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu2) 100%);
    color: #fff;
    border-radius: var(--yuvarlaklik);
    padding: 1.75rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--golge-belirgin);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute; top: -40%; right: -10%;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.hero::after {
    content: "";
    position: absolute; bottom: -50%; left: 10%;
    width: 160px; height: 160px; border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
    background: rgba(255,255,255,0.08);
}
.hero h2 { margin: 0 0 0.2rem 0; color: #fff; font-size: 1.6rem; }
.hero p { margin: 0; opacity: 0.92; }
.hero .hero-istatistikler { display: flex; gap: 1.5rem; flex-wrap: wrap; z-index: 1; }
.hero .hero-istatistik { text-align: center; }
.hero .hero-istatistik .deger { font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 900; line-height: 1; }
.hero .hero-istatistik .etiket { font-size: 0.78rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.04em; }

.sekme-dugmeleri { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sekme-dugme {
    background: var(--bg);
    color: var(--fg-soluk);
    border: 2px solid var(--kenarlik);
    font-weight: 800;
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
}
.sekme-dugme.aktif { background: linear-gradient(120deg, var(--vurgu), var(--vurgu2)); color: #fff; border-color: transparent; }

.ders-kart-kaydirma { overflow-x: auto; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; }
.ders-kart-sirasi { display: flex; flex-wrap: nowrap; gap: 1rem; }
.ders-karti {
    flex: 0 0 250px;
    border: 1px solid var(--kenarlik);
    border-radius: 18px;
    padding: 1.1rem;
    background: linear-gradient(160deg, var(--bg-yukselti), color-mix(in srgb, var(--ders-renk, var(--vurgu)) 6%, var(--bg-yukselti)));
    box-shadow: var(--golge);
    position: relative;
    overflow: hidden;
}
.ders-karti::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--ders-renk, var(--vurgu)), color-mix(in srgb, var(--ders-renk, var(--vurgu)) 40%, var(--vurgu2)));
}
.ders-karti-ust { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0.7rem; }
.ders-karti-simge {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ders-renk, var(--vurgu)) 18%, var(--bg-yukselti));
}
.ders-karti-ust .halka { width: 52px; height: 52px; flex-shrink: 0; }
.ders-karti-ust .halka::after { width: 40px; height: 40px; font-size: 0.72rem; }
.ders-karti-adi { font-weight: 900; }
.ders-karti-alt { font-size: 0.75rem; color: var(--fg-soluk); font-weight: 700; }
.ders-karti-satir { font-size: 0.84rem; margin: 0.4rem 0; }
.ders-karti-buton { display: block; text-align: center; margin-top: 0.7rem; font-size: 0.85rem; padding: 0.45rem; }

.hata { color: var(--zayif); font-weight: 700; }
.basari { color: var(--iyi); font-weight: 700; }

form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--fg-soluk); font-weight: 700; }

input, select, textarea, button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 2px solid var(--kenarlik);
    background: var(--bg);
    color: var(--fg);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vurgu); }

button, .buton {
    background: linear-gradient(120deg, var(--vurgu), var(--vurgu-koyu));
    color: #fff;
    border: none;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vurgu) 35%, transparent);
}
button:hover, .buton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--vurgu) 45%, transparent); }
button:active { transform: translateY(0); }

ul { list-style: none; padding: 0; margin: 0; }
li { padding: 0.6rem 0; border-bottom: 1px solid var(--kenarlik); }
li:last-child { border-bottom: none; }

.rozet {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
}
.durum-islenmedi { background: #a29bc9; }
.durum-islendi { background: var(--vurgu); }
.durum-tekrar_edildi { background: var(--iyi); }

.ilerleme-cubugu {
    height: 10px;
    border-radius: 999px;
    background: var(--kenarlik);
    overflow: hidden;
}
.ilerleme-cubugu > div {
    height: 100%;
    background: linear-gradient(90deg, var(--vurgu), var(--vurgu2));
    border-radius: 999px;
    transition: width 0.4s ease;
}

.buyuk-sayi {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 900;
    background: linear-gradient(120deg, var(--vurgu), var(--vurgu2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.seri-alevi { font-size: 1.6rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.ders-etiketi {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

.halka-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.halka-oge { text-align: center; width: 92px; }
.halka {
    --oran: 0;
    width: 76px; height: 76px;
    border-radius: 50%;
    margin: 0 auto 0.4rem;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--halka-renk, var(--vurgu)) calc(var(--oran) * 1%), var(--kenarlik) 0);
    transition: background 0.5s ease;
}
.halka::after {
    content: attr(data-yuzde) "%";
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--bg-yukselti);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.92rem;
}
.halka-etiket { font-size: 0.78rem; color: var(--fg-soluk); font-weight: 700; }

.rozet-mini-sira { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.rozet-mini {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--kenarlik);
    opacity: 0.3;
    filter: grayscale(1);
    cursor: default;
}
.rozet-mini.kazanildi {
    opacity: 1; filter: none;
    background: linear-gradient(160deg, var(--bg-yukselti), color-mix(in srgb, var(--vurgu2) 20%, var(--bg-yukselti)));
    border-color: var(--vurgu2);
}

.konfeti { animation: patla 0.6s ease-out; }
@keyframes patla {
    0% { transform: scale(1); }
    30% { transform: scale(1.15) rotate(-2deg); }
    60% { transform: scale(0.97) rotate(1deg); }
    100% { transform: scale(1); }
}

.asistan-baloncuk {
    background: var(--bg);
    border: 1px solid var(--kenarlik);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    margin: 0.6rem 0;
    white-space: pre-wrap;
}
.asistan-baloncuk.kullanici { border-color: var(--vurgu); }

#pomodoro-gosterge {
    font-family: 'Fraunces', serif;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(120deg, var(--vurgu), var(--vurgu2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}