/* Dizim Alanı — açılış, ödeme ve bilgi sayfalarının ortak kimliği.
   Oyunun kendi paleti ayrı; bu dosya oyunun dışındaki sayfalar içindir. */
/* Açılış sayfası oyunun krem kimliğini taşır; oyun kendi mor alanına açılır. */
:root{
  --zemin:#F5F2EA; --kart:#FBF9F4; --cizgi:#DED8C9; --cizgi-ince:#EAE5D8;
  --murekkep:#2E3626; --murekkep-yumusak:#5E6A50; --murekkep-soluk:#8A9479;
  --altin:#B07F2C; --altin-cizgi:#C08F3C; --yesil:#3E4A33;
  --golge:0 1px 0 rgba(46,54,38,.03), 0 16px 40px -28px rgba(46,54,38,.45);
  --lg-koyu:#3E4A33; --lg-orta:#8E9878; --lg-acik:#C6CBB7; --lg-altin:#C08F3C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --zemin:#141810; --kart:#1C2216; --cizgi:#333D2A; --cizgi-ince:#252D1F;
    --murekkep:#E7EBDD; --murekkep-yumusak:#A3AE92; --murekkep-soluk:#79856A;
    --altin:#D9AF5C; --altin-cizgi:#C08F3C; --yesil:#93A57C;
    --golge:0 1px 0 rgba(0,0,0,.3), 0 18px 44px -30px rgba(0,0,0,.9);
    --lg-koyu:#93A57C; --lg-orta:#6F7D5C; --lg-acik:#C3CEAC; --lg-altin:#D9AF5C;
  }
}
:root[data-theme="dark"]{
  --zemin:#141810; --kart:#1C2216; --cizgi:#333D2A; --cizgi-ince:#252D1F;
  --murekkep:#E7EBDD; --murekkep-yumusak:#A3AE92; --murekkep-soluk:#79856A;
  --altin:#D9AF5C; --altin-cizgi:#C08F3C; --yesil:#93A57C;
  --golge:0 1px 0 rgba(0,0,0,.3), 0 18px 44px -30px rgba(0,0,0,.9);
  --lg-koyu:#93A57C; --lg-orta:#6F7D5C; --lg-acik:#C3CEAC; --lg-altin:#D9AF5C;
}
*{box-sizing:border-box}
html{background:var(--zemin);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--murekkep);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.lg-koyuf{fill:var(--lg-koyu)}  .lg-ortaf{fill:var(--lg-orta)}
.lg-acikf{fill:var(--lg-acik)}  .lg-altinf{fill:var(--lg-altin)}
.lg-koyus{stroke:var(--lg-koyu)} .lg-altins{stroke:var(--lg-altin)}

.sayfa{max-width:1000px;margin:0 auto;
  padding:clamp(28px,6vw,64px) clamp(20px,5vw,40px) 56px;
  padding-left:max(clamp(20px,5vw,40px), env(safe-area-inset-left));
  padding-right:max(clamp(20px,5vw,40px), env(safe-area-inset-right));
  padding-bottom:max(56px, env(safe-area-inset-bottom))}
.ust{display:grid;gap:clamp(32px,6vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:860px){ .ust{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} }

/* ---------- marka ---------- */
.marka{text-align:center}
@media(min-width:860px){ .marka{text-align:left} }
.mark{width:clamp(150px,34vw,210px);height:auto;display:block;margin:0 auto 22px}
@media(min-width:860px){ .mark{margin:0 0 24px} }
h1{font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,7vw,3.1rem);line-height:1;letter-spacing:-.02em;
  margin:0 0 12px;text-wrap:balance}
.alt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--altin);margin:0 0 22px}
.lede{font-size:17px;line-height:1.55;color:var(--murekkep-yumusak);
  max-width:40ch;margin:0 auto 26px}
@media(min-width:860px){ .lede{margin:0 0 26px} }
.lede em{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--murekkep)}

.nasil{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  max-width:40ch;margin-inline:auto;text-align:left}
@media(min-width:860px){ .nasil{margin-inline:0} }
.nasil li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline;
  font-size:14.5px;line-height:1.5;color:var(--murekkep-yumusak)}
.nasil .n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  color:var(--altin)}
.nasil b{color:var(--murekkep);font-weight:500}

/* ---------- giriş kartı ---------- */
.kart{background:var(--kart);border:1px solid var(--cizgi);box-shadow:var(--golge);
  padding:clamp(24px,5vw,32px);display:flex;flex-direction:column}
.kart h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.35rem;
  line-height:1.2;margin:0 0 6px}
.kart .kbas{font-size:14.5px;color:var(--murekkep-yumusak);margin:0 0 22px;line-height:1.5}
.dugme{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:50px;padding:13px 16px;border:1px solid var(--cizgi);background:transparent;
  color:var(--murekkep);font-family:"Karla",sans-serif;font-size:15px;font-weight:500;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
  border-radius:0;-webkit-appearance:none;appearance:none}
.dugme:hover{border-color:var(--altin-cizgi)}
.dugme:focus-visible{outline:2px solid var(--altin-cizgi);outline-offset:2px}
.dugme.birincil{background:var(--yesil);border-color:var(--yesil);color:var(--zemin);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
.dugme.birincil:hover{background:var(--murekkep);border-color:var(--murekkep)}
.dugme svg{flex:0 0 auto}
.ayirac{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--murekkep-soluk)}
.ayirac::before,.ayirac::after{content:"";flex:1;height:1px;background:var(--cizgi-ince)}
.alan{display:block;margin:0 0 14px}
.alan span{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--murekkep-soluk);margin-bottom:6px}
.alan input{display:block;width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--cizgi);color:var(--murekkep);
  font-family:"Karla",sans-serif;font-size:16px;padding:9px 2px;outline:none;
  border-radius:0;-webkit-appearance:none;appearance:none}
.alan input:focus{border-bottom-color:var(--altin-cizgi)}
.gecis{margin:16px 0 0;font-size:14px;color:var(--murekkep-yumusak);text-align:center}
.gecis button{background:none;border:none;padding:0;color:var(--altin);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:3px}
.uyari-kutu{margin:16px 0 0;padding:12px 14px;border-left:2px solid var(--altin-cizgi);
  font-size:13.5px;line-height:1.5;color:var(--murekkep-yumusak);background:transparent}
.uyari-kutu[hidden]{display:none}
/* Aşama 2 bağlanınca silinecek geçici kapı */
.gecici{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--cizgi-ince);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murekkep-soluk);text-align:center}
.gecici a{color:var(--altin);text-underline-offset:3px}
.gecici span{display:block;margin-top:4px;opacity:.75;text-transform:none;letter-spacing:0}

.dip{margin:clamp(40px,8vw,64px) 0 0;padding:22px 0 0;border-top:1px solid var(--cizgi-ince);
  font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.8;
  color:var(--murekkep-soluk)}
.dip p{margin:0 0 8px;max-width:70ch}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }

/* ---------- ödeme sayfası ---------- */
.dar{max-width:560px;margin:0 auto}
.tepe{text-align:center;margin:0 0 34px}
.tepe .mark{width:clamp(96px,22vw,124px);margin:0 auto 20px}
.tepe h1{font-size:clamp(1.7rem,5.5vw,2.2rem);margin:0 0 10px}
.tepe .lede{margin:0 auto}
.fiyat{text-align:center;padding:26px 22px;border:1px solid var(--cizgi);
  background:var(--kart);box-shadow:var(--golge);margin:0 0 22px}
.fiyat .tutar{font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2.4rem,9vw,3rem);line-height:1;letter-spacing:-.02em;
  color:var(--murekkep);display:block}
.fiyat .donem{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--murekkep-soluk);display:block;margin-top:10px}
.fiyat .esdeger{font-size:13.5px;color:var(--murekkep-yumusak);margin:12px 0 0}
.fiyat .esdeger[hidden]{display:none}
.icerik{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}
.icerik li{display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:baseline;
  font-size:15px;line-height:1.5;color:var(--murekkep-yumusak)}
.icerik .im{color:var(--altin);font-family:"IBM Plex Mono",monospace;font-size:12px}
.icerik b{color:var(--murekkep);font-weight:500}
.onay{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--murekkep-yumusak);
  cursor:pointer}
.onay input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--yesil);cursor:pointer}
.onay a{color:var(--altin);text-underline-offset:3px}
.kart-notu{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--murekkep-soluk);margin:16px 0 0}
.cikis{text-align:center;margin:26px 0 0;font-size:14px}
.cikis a{color:var(--murekkep-yumusak);text-underline-offset:3px}

/* ---------- yönetim paneli ---------- */
.yon-bas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 26px;padding:0 0 18px;border-bottom:1px solid var(--cizgi-ince)}
.yon-bas .mark{width:34px;margin:0;flex:0 0 auto}
.yon-bas h1{font-size:1.5rem;margin:0;flex:1 1 auto}
.yon-bas .cik{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--murekkep-yumusak);text-underline-offset:3px}
.ozet{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  margin:0 0 26px}
.ozet div{border:1px solid var(--cizgi);background:var(--kart);padding:16px 16px 14px}
.ozet b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.9rem;
  line-height:1;color:var(--murekkep);font-variant-numeric:tabular-nums}
.ozet span{display:block;margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--murekkep-soluk)}
.tablo-kap{overflow-x:auto;border:1px solid var(--cizgi);background:var(--kart)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--cizgi-ince);
  white-space:nowrap}
th{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--murekkep-soluk);font-weight:400}
tbody tr:last-child td{border-bottom:none}
td.sayi{font-variant-numeric:tabular-nums;text-align:right}
td.eposta{white-space:normal;word-break:break-word;min-width:200px;color:var(--murekkep)}
.rozet{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--cizgi)}
.rozet.etkin{color:var(--yesil);border-color:var(--yesil)}
.rozet.yok{color:var(--murekkep-soluk)}
.rozet.iptal{color:var(--altin);border-color:var(--altin-cizgi)}
.rozet.yonetici{color:var(--altin);border-color:var(--altin-cizgi)}
.durum{padding:26px 0;color:var(--murekkep-yumusak);font-size:15px;text-align:center}
/* uyarı kutusu göze çarpsın */
.uyari-kutu{background:var(--kart);border:1px solid var(--altin-cizgi);
  border-left-width:3px;padding:14px 16px;color:var(--murekkep)}
/* iyzico ödeme formu katmanı */
.popup{position:fixed;inset:0;z-index:9999;background:var(--zemin);overflow:auto;
  padding:16px;padding-top:max(16px, env(safe-area-inset-top))}
/* girişsiz oynama yolu */
#serbest[hidden]{display:none}
.kart .dugme.birincil[href]{text-decoration:none}
.serbest-not{margin:10px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--murekkep-yumusak);text-align:center}