/* Sizin Kareniz — misafir yükleme ekranı (gerçek). Demo sayfası aynı görünümü satır içi kullanır. */
:root{--f:#FBF8F3;--k:#fff;--krem:#F4EEE4;--m:#1E1A17;--m2:#3F3833;--s:#6B625A;--c:#E6DED2;--a:#B8935A;--aa:#D9BC8C;--ay:#7A5C2E;--ok:#2F6B4F;--uyari:#8A4B08;--hata:#A1261B;
--serif:'Cormorant Garamond',Georgia,serif;--sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--f);color:var(--m);font:400 1.125rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
a{color:var(--ay)}
:focus-visible{outline:3px solid var(--ay);outline-offset:3px;border-radius:6px}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ust{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:560px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--m);font:600 1.25rem/1 var(--serif)}
.logo svg{width:28px;height:28px}
.demo-rozet{font-size:.875rem;font-weight:700;letter-spacing:.08em;background:var(--m);color:var(--f);padding:6px 12px;border-radius:999px}
.serit{max-width:560px;margin:0 auto 8px;padding:0 16px}
.serit p{margin:0;background:#FFF6E5;border:1px solid #F0DDB8;color:#5E4617;border-radius:14px;padding:10px 14px;font-size:1rem;display:flex;gap:10px;align-items:flex-start}
.serit svg{width:20px;height:20px;flex:none;margin-top:2px}
main{max-width:560px;margin:0 auto;padding:8px 16px calc(32px + env(safe-area-inset-bottom))}
.kart{background:var(--k);border:1px solid var(--c);border-radius:28px;padding:32px 24px;box-shadow:0 1px 2px rgba(30,26,23,.05),0 12px 40px rgba(30,26,23,.07)}
.bas{text-align:center}
.tur{font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ay);margin:0}
h1{font:600 clamp(2.5rem,9vw,3.25rem)/1.05 var(--serif);margin:8px 0 6px;letter-spacing:-.01em}
.tarih{color:var(--s);margin:0}
.susl{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0;color:var(--a)}
.susl::before,.susl::after{content:"";width:56px;height:1.5px;background:currentColor}
.mesaj{text-align:center;color:var(--m2);margin:0 0 24px}
label{display:block;font-weight:700;margin-bottom:8px}
input[type=text],textarea{width:100%;min-height:60px;border:2px solid var(--c);border-radius:16px;padding:14px 16px;font:500 1.1875rem/1.3 var(--sans);color:var(--m);background:#fff;transition:border-color .2s}
textarea{min-height:120px;resize:vertical}
input[type=text]:focus,textarea:focus{border-color:var(--m);outline:none}
input[aria-invalid=true]{border-color:var(--hata)}
.hata{color:var(--hata);font-weight:600;margin:8px 0 0}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;border-radius:18px;border:2px solid transparent;font:700 1.25rem/1.2 var(--sans);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s}
.btn:active{transform:scale(.985)}
.btn svg{width:26px;height:26px;flex:none}
.btn-ana{background:var(--m);color:var(--f);margin-top:16px;box-shadow:0 10px 24px rgba(30,26,23,.2)}
.btn-ana:hover{background:#000}
.btn-ikincil{background:#fff;color:var(--m);border-color:var(--c);min-height:56px;font-size:1.125rem}
.btn-ikincil:hover{border-color:var(--m)}
.kvkk{font-size:1rem;color:var(--s);text-align:center;margin:16px 0 0}
.kucuk-btn{background:none;border:0;color:var(--ay);font:600 1rem var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:48px;padding:0 8px}
[hidden]{display:none!important}
/* Yükleme */
.durum-bas{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
h2{font:600 2rem/1.1 var(--serif);margin:0}
.uyari{color:var(--s);margin:6px 0 20px}
.toplam{background:var(--krem);border-radius:20px;padding:16px}
.toplam-ust{display:flex;justify-content:space-between;font-weight:700}
.toplam-alt{display:flex;justify-content:space-between;color:var(--s);font-size:1rem;margin-top:8px}
.cubuk{height:12px;border-radius:12px;background:#fff;overflow:hidden;margin-top:12px}
.cubuk i{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(90deg,var(--a),var(--aa));transition:width .2s linear}
.kopuk{display:flex;gap:10px;align-items:flex-start;background:#FDF1E6;border:1px solid #F1CFAE;color:var(--uyari);border-radius:16px;padding:12px 14px;margin-top:12px;font-weight:600}
.kopuk svg{width:22px;height:22px;flex:none;margin-top:1px}
.liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.liste li{display:grid;grid-template-columns:56px 1fr 28px;gap:12px;align-items:center;padding:8px;border:1px solid var(--c);border-radius:16px;background:#fff}
.onizleme{width:56px;height:56px;border-radius:12px;background:var(--krem);overflow:hidden;display:grid;place-items:center;color:var(--s)}
.onizleme img{width:100%;height:100%;object-fit:cover}
.onizleme svg{width:26px;height:26px}
.ad{font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boyut{font-size:.9375rem;color:var(--s)}
.mini{height:6px;border-radius:6px;background:var(--krem);overflow:hidden;margin-top:6px}
.mini i{display:block;height:100%;width:0;background:var(--a);border-radius:6px}
.simge{width:28px;height:28px;color:var(--s)}
.tamam .simge{color:var(--ok)}
.tamam .mini i{background:var(--ok)}
.fazla{margin-top:16px}
.ipucu{text-align:center;margin:8px 0 0}
/* Bitti */
.bitti{text-align:center}
.bitti .ok{width:88px;height:88px;border-radius:50%;background:#E3F0E8;color:var(--ok);display:grid;place-items:center;margin:0 auto 20px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.bitti .ok svg{width:44px;height:44px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bitti p{color:var(--m2);margin:12px 0 0}
.not-kutu{margin-top:24px;text-align:left;border-top:1px solid var(--c);padding-top:24px}
.not-kutu .btn{margin-top:12px}
.not-tamam{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--ok);font-weight:700;margin-top:24px}
.not-tamam svg{width:24px;height:24px}
.tanitim{margin-top:24px;background:var(--m);color:var(--f);border-radius:24px;padding:24px;text-align:center}
.tanitim strong{display:block;font:600 1.75rem/1.15 var(--serif)}
.tanitim p{color:#D8CDBF;margin:8px 0 16px}
.tanitim a{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,#E6CC9B,#C9A46A);color:var(--m);font-weight:700;text-decoration:none}
.alt{text-align:center;color:var(--s);font-size:1rem;margin-top:24px}
.alt a{color:var(--s)}
.gorev-kutu{margin-top:20px;border:1.5px solid var(--c);border-radius:18px;background:var(--f);overflow:hidden}
.gorev-kutu summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;cursor:pointer}
.gorev-kutu summary::-webkit-details-marker{display:none}
.gorev-ikon{width:40px;height:40px;border-radius:12px;background:#F3E7D3;color:var(--ay);display:grid;place-items:center;flex:none}
.gorev-ikon svg{width:22px;height:22px}
.gorev-baslik{flex:1;min-width:0}
.gorev-baslik b{display:block;font-size:1.0625rem}
.gorev-baslik small{display:block;color:var(--s);font-size:.9375rem}
.gorev-ok{width:22px;height:22px;flex:none;color:var(--s);transition:transform .2s}
.gorev-kutu[open] .gorev-ok{transform:rotate(180deg)}
.gorev-aciklama{margin:0;padding:0 16px 8px;color:var(--s);font-size:1rem}
.gorev-liste{list-style:none;margin:0;padding:0 10px 12px;display:grid;gap:8px}
.gorev-liste button{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border:1.5px solid var(--c);border-radius:14px;background:#fff;font:600 1.0625rem var(--sans);color:var(--m);text-align:left;cursor:pointer}
.gorev-liste button:hover{border-color:var(--m)}
.gorev-liste .durum-ikon{width:28px;height:28px;border-radius:50%;border:2px solid var(--c);display:grid;place-items:center;flex:none;color:#fff}
.gorev-liste .durum-ikon svg{width:16px;height:16px;opacity:0}
.gorev-liste .tamam button{border-color:#BFD9C9;background:#F3FAF6}
.gorev-liste .tamam .durum-ikon{background:var(--ok);border-color:var(--ok)}
.gorev-liste .tamam .durum-ikon svg{opacity:1}
.gorev-liste .tamam small{display:block;color:var(--ok);font-size:.875rem;font-weight:700}
.gorev-etiket-k{display:inline-block;margin-top:4px;font-size:.8125rem;font-weight:700;color:var(--ay);background:#F3E7D3;padding:2px 8px;border-radius:999px}
.gorev-tamam{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ok);font-weight:700}
.gorevlere-don{margin-top:10px}
.serit a{color:#5E4617;font-weight:700}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Gerçek sayfaya özel */
.yuklen{min-height:60vh;display:grid;place-items:center;color:var(--s)}
.yuklen svg{width:40px;height:40px}
.bilgi-kart{text-align:center}
.bilgi-kart h1{font-size:clamp(2rem,7vw,2.5rem)}
.liste li.hatali{border-color:#E9B8B2;background:#FDF3F2}
.liste li.hatali .simge{color:var(--hata)}
.satir-not{font-size:.875rem;font-weight:700;color:var(--hata);margin-top:4px}
.satir-not.bilgi{color:var(--ok)}
.tekrar{margin-top:12px}
.kapali{background:#F3EFE8;border-radius:16px;padding:14px 16px;text-align:center;color:var(--m2);font-weight:600;margin:0 0 8px}