/* qr-menu — panel ve yonetim ekranlarinin ortak tasarim dili.
   Musteri menusuyle ayni palet: krem kagit, murekkep koyusu, altin vurgu,
   Marcellus (baslik) + Rubik (metin). Sayfaya ozel kurallar kendi <style>'inda. */

:root{
  --kagit:#f3efe9; --kart:#fbf9f6; --murekkep:#1c1a17; --metin:#3d4147; --soluk:#8b8579;
  --altin:#8a6a1c; --altin-soluk:#8a6a1c14; --cizgi:#e3ddd2; --kirmizi:#a33a2b;
  --golge:0 1px 2px rgba(28,26,23,.04), 0 8px 24px rgba(28,26,23,.05);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--kagit); color:var(--metin);
  font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px; line-height:1.55;
}
h1,h2,h3,.serif{font-family:Marcellus,Georgia,serif;font-weight:400;color:var(--murekkep);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--altin)}
.sarmal{max-width:980px;margin:0 auto;padding:0 18px}
.etiket{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--altin);font-weight:500}

/* ── düğmeler ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:12px;
  background:var(--murekkep);color:#f4efe4;border:1px solid var(--murekkep);font-size:14px;font-weight:500;
  text-decoration:none;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn.ikincil{background:var(--kart);color:var(--murekkep);border-color:var(--cizgi)}
.btn.altin{background:var(--altin);border-color:var(--altin);color:#fff}
.btn.tehlike{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.btn.kucuk{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}

/* ── yüzeyler ── */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);box-shadow:var(--golge)}

/* ── form ── */
label.alan{display:block;margin-bottom:13px}
label.alan span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soluk);margin-bottom:6px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],
input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--cizgi);border-radius:11px;background:#fff;
  outline:none;color:var(--murekkep);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--altin);box-shadow:0 0 0 3px var(--altin-soluk)}
textarea{min-height:76px;resize:vertical;font-family:inherit}
label.onay{display:flex;gap:9px;align-items:center;margin-bottom:13px}
label.onay input{width:auto}
label.onay span{margin:0;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--metin);font-weight:400}
.satir{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){.satir{grid-template-columns:1fr}}

/* ── başlık çubuğu ── */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--kagit) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--cizgi)}
.bas-ic{display:flex;align-items:center;gap:12px;padding:14px 0}
.bas-ic h1{font-size:19px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;color:var(--soluk);white-space:nowrap}
nav button.aktif{background:var(--murekkep);color:#f4efe4}
main{padding:22px 0 72px}
h2.baslik{font-family:Marcellus,Georgia,serif;font-size:24px;color:var(--murekkep);margin:0 0 5px}
p.acik-not{color:var(--soluk);margin:0 0 18px;font-size:13.5px;font-weight:300}

/* ── rozetler ── */
.plan,.durum{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding:5px 10px;border-radius:999px;background:var(--altin-soluk);color:var(--altin);white-space:nowrap}
.plan.uyari,.durum.uyari{background:#a33a2b14;color:var(--kirmizi)}
.durum.pasif{background:#8b857914;color:var(--soluk)}
.uyari-serit{padding:13px 16px;border-radius:12px;background:#a33a2b0f;color:var(--kirmizi);
  font-size:13.5px;margin-bottom:18px}

/* ── sayı kartları ── */
.sayilar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sayi-kart{flex:1;min-width:140px;padding:18px}
.sayi-kart b{display:block;font-family:Marcellus,Georgia,serif;font-size:28px;font-weight:400;color:var(--murekkep)}
.sayi-kart span{color:var(--soluk);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ── modal ── */
.perde{position:fixed;inset:0;background:rgba(16,14,12,.5);backdrop-filter:blur(2px);z-index:60;
  display:none;padding:16px;overflow:auto}
.perde.acik{display:block}
.modal{max-width:560px;margin:28px auto;background:var(--kart);border-radius:18px;padding:24px;
  box-shadow:0 24px 70px rgba(16,14,12,.3)}
.modal h3{font-size:21px;margin-bottom:18px}
.modal-dip{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* ── çipler ── */
.cipler{display:flex;gap:7px;flex-wrap:wrap}
.cip{padding:7px 13px;border-radius:999px;border:1px solid var(--cizgi);font-size:12.5px;background:#fff;color:var(--metin)}
.cip.secili{background:var(--altin);color:#fff;border-color:var(--altin)}

/* ── bildirim ── */
.bildirim{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--murekkep);
  color:#f4efe4;padding:12px 20px;border-radius:12px;font-size:14px;z-index:90;transition:transform .25s;
  box-shadow:0 10px 30px rgba(16,14,12,.28)}
.bildirim.gor{transform:translate(-50%,0)}

/* ── giriş ekranı ── */
#giris{min-height:100dvh;display:grid;place-items:center;padding:22px}
#giris .kutu{width:100%;max-width:400px;padding:34px}
#giris .kutu h1{font-size:27px;margin-bottom:6px}
.alt-not{color:var(--soluk);font-size:13.5px;font-weight:300;margin:0 0 24px}

/* ── tablo ── */
.tablo-sarmal{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--soluk);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;padding:13px 14px;border-bottom:1px solid var(--cizgi)}
td{padding:13px 14px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
tr:last-child td{border-bottom:0}
code{background:var(--altin-soluk);color:var(--altin);padding:3px 7px;border-radius:6px;font-size:12.5px}

.bos-durum{text-align:center;color:var(--soluk);padding:40px 18px;font-weight:300}
.ince-ayrac{width:44px;height:1px;background:var(--altin);opacity:.5;margin:16px auto}