:root {
    --mor: #7257ff;
    --mor-koyu: #4c35c9;
    --pembe: #ff5f9e;
    --turkuaz: #20c9b5;
    --sari: #ffcf4a;
    --lacivert: #26304a;
    --gri: #6c7487;
    --beyaz: #ffffff;
}

* {
    box-sizing: border-box;
    font-family: "Comic Sans MS", "Trebuchet MS", "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    padding: 28px 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    color: var(--lacivert);
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, .75) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 20%, rgba(255, 255, 255, .7) 0 5px, transparent 6px),
        radial-gradient(circle at 18% 88%, rgba(255, 255, 255, .55) 0 4px, transparent 5px),
        linear-gradient(135deg, #ffd8ee 0%, #d9e6ff 48%, #c7fff6 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
    animation: yuz 7s ease-in-out infinite;
}

body::before {
    width: 230px;
    height: 230px;
    left: -70px;
    top: 18%;
    background: rgba(255, 95, 158, .22);
}

body::after {
    width: 280px;
    height: 280px;
    right: -100px;
    bottom: 4%;
    background: rgba(114, 87, 255, .20);
    animation-delay: -3s;
}

@keyframes yuz {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-18px) rotate(5deg); }
}

.oyun-konteyner {
    width: 100%;
    max-width: 1120px;
    padding: 28px;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    border: 5px solid rgba(255, 255, 255, .95);
    border-radius: 34px;
    box-shadow: 0 25px 70px rgba(62, 47, 130, .22), 0 10px 0 rgba(114, 87, 255, .12);
    backdrop-filter: blur(12px);
}

.ust-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 10px;
    color: var(--mor-koyu);
    background: #f0edff;
    border: 2px solid #ded7ff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .3px;
}

h1 {
    margin: 0;
    color: var(--mor-koyu);
    font-size: clamp(29px, 5vw, 46px);
    line-height: 1.05;
    text-shadow: 3px 3px 0 #efeaff;
}

.alt-baslik {
    max-width: 680px;
    margin: 12px auto 22px;
    color: var(--gri);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.bilgi-mesaji {
    padding: 13px 15px;
    margin-bottom: 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 900;
}

.bilgi-basarili { color: #12815d; background: #e8fff7; border: 2px dashed #20b486; }
.bilgi-silindi { color: #c0392b; background: #fff0ef; border: 2px dashed #e74c3c; }

.giris-karti {
    max-width: 620px;
    margin: 24px auto 0;
    padding: 26px;
    background: linear-gradient(145deg, #ffffff, #faf8ff);
    border: 3px solid #e9e4ff;
    border-radius: 28px;
    box-shadow: 0 16px 35px rgba(76, 53, 201, .12);
}

.giris-emojileri { margin: 10px 0 18px; font-size: clamp(45px, 9vw, 72px); }

.input-giris,
.input-mobil-sayi {
    width: 100%;
    outline: none;
    text-align: center;
    font-weight: 900;
    color: var(--lacivert);
    background: #fff;
    border: 4px solid #ded7ff;
    transition: .2s ease;
}

.input-giris {
    padding: 17px;
    margin-bottom: 16px;
    border-radius: 18px;
    font-size: 21px;
}

.input-giris:focus,
.input-mobil-sayi:focus {
    border-color: var(--mor);
    box-shadow: 0 0 0 5px rgba(114, 87, 255, .12);
}

.btn-basla {
    width: 100%;
    min-height: 58px;
    padding: 15px 18px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #26d3b8, #16a085);
    box-shadow: 0 8px 0 #0f816e, 0 13px 25px rgba(22, 160, 133, .20);
    cursor: pointer;
    font-size: 21px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.btn-basla:hover { transform: translateY(-2px); }
.btn-basla:active { transform: translateY(6px); box-shadow: 0 2px 0 #0f816e; }

.harita-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 24px 0 8px;
    padding: 15px 18px;
    text-align: left;
    background: linear-gradient(135deg, #f7f4ff, #eefcfa);
    border: 2px solid #e7e1ff;
    border-radius: 20px;
}

.harita-baslik strong { color: var(--mor-koyu); font-size: 18px; }
.harita-baslik span { color: var(--gri); font-size: 13px; font-weight: 800; }

.macera-haritasi {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-top: 18px;
}

.gorev-karti {
    min-width: 0;
    min-height: 178px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;
    border-radius: 24px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.gorev-karti:hover { transform: translateY(-4px); }

.gorev-karti-bos {
    background: linear-gradient(145deg, #ffffff, #f3f5fa);
    border: 3px solid #d9dfeb;
    box-shadow: 0 7px 0 #d9dfeb, 0 12px 20px rgba(54, 67, 95, .08);
}

.gorev-karti-dolu {
    box-shadow: 0 7px 0 rgba(0, 0, 0, .10), 0 14px 24px rgba(49, 62, 89, .11);
}

.gorev-ana-link {
    flex: 1;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.gorev-numara { font-size: 17px; font-weight: 900; line-height: 1.2; }
.gorev-ikon { margin-bottom: 4px; font-size: 28px; }
.hazir-yazi { margin-top: 5px; color: #98a1b3; font-size: 11px; font-weight: 800; }

.skor-balonu {
    display: inline-block;
    padding: 5px 9px;
    margin-top: 8px;
    color: white;
    background: rgba(38, 48, 74, .92);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.unvan-etiket {
    display: inline-block;
    padding: 4px 7px;
    margin-top: 6px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
}

.btn-harita-detay {
    width: 100%;
    min-height: 38px;
    padding: 8px 6px;
    color: #fff;
    background: linear-gradient(135deg, #6d8cff, #526ee8);
    border: 0;
    border-radius: 13px;
    box-shadow: 0 4px 0 #4059c4;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    transition: .12s ease;
}

.btn-harita-detay:hover { transform: translateY(-1px); }
.btn-harita-detay:active { transform: translateY(3px); box-shadow: 0 1px 0 #4059c4; }
.btn-harita-detay:disabled { opacity: .7; cursor: wait; }

.sayfalama {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 27px 0 10px;
}

.sayfa-btn {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mor-koyu);
    background: #fff;
    border: 3px solid #dcd5ff;
    border-radius: 16px;
    box-shadow: 0 5px 0 #dcd5ff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    transition: .15s ease;
}

.sayfa-btn:hover { transform: translateY(-2px); }

.sayfa-btn.aktif {
    color: #fff;
    background: linear-gradient(135deg, var(--mor), var(--pembe));
    border-color: var(--mor-koyu);
    box-shadow: 0 5px 0 var(--mor-koyu), 0 9px 18px rgba(114, 87, 255, .25);
}

.sayfa-aciklama {
    width: 100%;
    margin-top: 4px;
    color: var(--gri);
    font-size: 12px;
    font-weight: 800;
}

.genel-ozet-alani {
    padding: 20px;
    margin: 28px 0 18px;
    background: linear-gradient(135deg, #fff8dc, #ffe2bf);
    border: 3px dashed #ffad3b;
    border-radius: 24px;
}

.ozet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .86);
    border-radius: 17px;
}

.ozet-sayi { font-size: 23px; font-weight: 900; }
.ozet-metin { margin-top: 3px; color: #7d8492; font-size: 10px; font-weight: 900; }

.hesap-sil {
    display: inline-block;
    padding: 8px 13px;
    margin-top: 10px;
    color: #c0392b;
    background: #fff7f3;
    border: 1px dashed #e74c3c;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.soru-karti {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(145deg, #fff, #f9f7ff);
    border: 3px solid #e6e0ff;
    border-radius: 28px;
    box-shadow: 0 18px 38px rgba(76, 53, 201, .12);
}

.gorev-soru-bilgisi {
    margin-bottom: 9px;
    color: var(--mor-koyu);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .4px;
}

.ilerleme-pisti {
    height: 17px;
    margin-bottom: 23px;
    overflow: hidden;
    background: #e3e6ef;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08);
}

.ilerleme-roketi {
    height: 100%;
    background: linear-gradient(90deg, var(--pembe), var(--mor));
    border-radius: inherit;
    transition: width .3s ease;
}

.canli-sayi {
    display: inline-flex;
    min-width: 185px;
    min-height: 125px;
    align-items: center;
    justify-content: center;
    padding: 15px 45px;
    margin: 18px 0 22px;
    color: #e78d00;
    background: linear-gradient(145deg, #fffce9, #fff2b9);
    border: 5px dashed #f4b400;
    border-radius: 28px;
    box-shadow: 0 10px 25px rgba(244, 180, 0, .18);
    font-size: clamp(58px, 12vw, 82px);
    font-weight: 900;
    text-shadow: 2px 2px 0 #fff;
}

.input-mobil-sayi {
    padding: 15px;
    margin-bottom: 17px;
    border-radius: 18px;
    font-size: 36px;
}

.pdf-sertifika-alani {
    padding: 28px;
    margin: 17px 0;
    background: #fff;
    border: 9px double var(--pembe);
    border-radius: 20px;
    text-align: center;
}

.sertifika-kral { margin: 0; font-size: 45px; }
.sertifika-baslik { margin: 10px 0; color: var(--mor-koyu); font-size: 26px; font-weight: 900; }
.sertifika-metin { color: #343b4f; font-size: 16px; line-height: 1.6; }
.sertifika-isim { display: inline-block; padding: 0 20px; margin: 10px 0; color: #526ee8; border-bottom: 3px dashed #8ba0ff; font-size: 26px; font-weight: 900; }
.sertifika-site-etiket { margin-top: 25px; color: #aab0bd; font-size: 13px; font-weight: 900; letter-spacing: 1px; }

.pdf-dis-kapsayici {
    position: absolute;
    left: -99999px;
    top: 0;
    width: 680px;
    background: white;
}

.yasal-bilgi-kutusu {
    padding: 12px 14px;
    margin: 14px 0 0;
    color: #596174;
    background: #f7f5ff;
    border: 2px solid #e3ddff;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.yasal-link {
    color: var(--mor-koyu);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hesap-sil-form {
    margin: 18px 0 0;
}

.hesap-sil-buton {
    display: inline-block;
    padding: 7px 13px;
    color: #c0392b;
    background: #fff5f4;
    border: 1px dashed #e74c3c;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.yasal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 15px;
    padding: 18px 8px 2px;
    margin-top: 22px;
    border-top: 2px dashed #e7e1ff;
    color: #747d8c;
    font-size: 12px;
    font-weight: 800;
}

.yasal-footer span {
    flex-basis: 100%;
}

.yasal-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(25, 29, 48, .72);
    backdrop-filter: blur(5px);
}

.yasal-modal.acik {
    display: flex;
}

.yasal-modal-kutu {
    width: min(760px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px;
    color: #2d3549;
    background: #fff;
    border: 4px solid #e4ddff;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    text-align: left;
}

.yasal-modal-kutu h2 {
    margin: 0 42px 12px 0;
    color: var(--mor-koyu);
    font-size: 24px;
}

.yasal-modal-kutu h3 {
    margin: 20px 0 6px;
    color: #4059c4;
    font-size: 16px;
}

.yasal-modal-kutu p,
.yasal-modal-kutu li {
    color: #515a6e;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

.yasal-modal-kutu ul {
    padding-left: 20px;
}

.yasal-kapat {
    position: sticky;
    top: 0;
    float: right;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #e74c3c;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 900;
}

.cerez-bandi {
    position: fixed;
    z-index: 9000;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: none;
    width: min(780px, calc(100% - 32px));
    padding: 15px;
    margin: 0 auto;
    color: #2d3549;
    background: rgba(255, 255, 255, .98);
    border: 3px solid #dcd4ff;
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(36, 28, 82, .28);
}

.cerez-bandi.goster {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cerez-bandi p {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.cerez-tamam {
    flex: 0 0 auto;
    padding: 10px 17px;
    color: #fff;
    background: var(--mor);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 930px) {
    .oyun-konteyner { max-width: 760px; }
    .macera-haritasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gorev-karti { min-height: 165px; }
}

@media (max-width: 620px) {
    body { padding: 12px 8px 24px; }

    .oyun-konteyner {
        padding: 18px 12px;
        border-width: 3px;
        border-radius: 24px;
    }

    .alt-baslik { margin-bottom: 16px; font-size: 14px; }
    .giris-karti, .soru-karti { padding: 17px 12px; border-radius: 22px; }
    .harita-baslik { align-items: flex-start; flex-direction: column; padding: 13px 14px; }
    .macera-haritasi { gap: 11px; }
    .gorev-karti { min-height: 162px; padding: 9px; border-radius: 19px; }
    .gorev-numara { font-size: 15px; }
    .skor-balonu { padding: 4px 7px; font-size: 9px; }
    .unvan-etiket { font-size: 9px; }
    .btn-harita-detay { min-height: 36px; font-size: 10px; }
    .sayfa-btn { width: 48px; height: 48px; border-radius: 14px; }
    .ozet-grid { grid-template-columns: 1fr; }
    .canli-sayi { min-width: 155px; min-height: 105px; padding: 12px 35px; }
    .pdf-sertifika-alani { padding: 18px 10px; border-width: 7px; }
    .sertifika-baslik { font-size: 22px; }
    .sertifika-isim { font-size: 22px; }
    .cerez-bandi.goster { align-items: stretch; flex-direction: column; }
    .cerez-tamam { width: 100%; }
    .yasal-modal { padding: 8px; }
    .yasal-modal-kutu { max-height: 94vh; padding: 18px 14px; border-radius: 18px; }
    .yasal-modal-kutu h2 { font-size: 20px; }
}

@media (max-width: 370px) {
    .macera-haritasi { grid-template-columns: 1fr; }
    .gorev-karti { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}