:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#666666;

  --green:#34A853;       /* Google yeşili */
  --green-dark:#2c8e45;
  --blue:#1877F2;        /* Facebook mavisi (genel) */
  --blue-dark:#145dbf;

  --surface:#f9f9f9;
  --panel:#ffffff;
  --border:#e5e5e5;

  --danger:#e53935;
  --danger-dark:#c62828;

  --radius:12px;
  --gap:16px;
  --maxw:1100px;

  --footer-h:64px;
}

/* ========= GLOBAL ========= */
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* sabit header ve footer için boşluk */
  padding-top:60px;
  padding-bottom:calc(var(--footer-h) + 24px);
}


/* ========= SABİT ÜST HEADER ========= */
.fixed-header{
  background-color:#3b5998; /* senin verdiğin kod */
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  position:fixed;
  top:0; left:0; width:100%;
  box-sizing:border-box;
  z-index:1000;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  font-family:'Mulish', sans-serif;
}
.fixed-header .logo{
  font-size:1.5em; /* istek */
  font-weight:bold;
  display:flex; align-items:center;
}
.home-button{
  background-color:#4CAF50;
  color:#fff;
  border:none; border-radius:5px;
  padding:8px 15px;
  font-size:1em;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:background-color .3s ease, transform .15s ease;
}
.home-button:hover{ background-color:#45a049; transform:translateY(-1px) }

/* ========= ANA İÇERİK ========= */
main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gap);
}

/* Bölüm başlıkları */
.section-header{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:var(--blue);
  margin-top:18px;
  margin-bottom:8px;
}

/* ========= SAYILAR (DICE) ========= */
#dice-area{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:14px 0 12px;
}
.die, #dieA, #dieB{
  width:min(180px,36vw);
  aspect-ratio:5/3;
  display:grid; place-items:center;
  font:700 clamp(28px,6vw,48px) ui-monospace, monospace;
  background:#e3f2fd;   /* soluk mavi */
  color:#000;           /* siyah yazı */
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 8px rgba(0,0,0,.20);
}

/* ========= İŞLEM BUTONLARI ========= */
#operations{
  display:grid;
  grid-template-columns:repeat(4, minmax(62px,1fr));
  gap:12px;
  margin:10px 0 12px;
}
.op-btn{
  font-size:clamp(22px,4vw,28px);
  padding:12px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  transition:.2s transform ease,.2s box-shadow ease;
  box-shadow:0 4px 8px rgba(0,0,0,.20);
}
.op-btn:hover{ transform:translateY(-1px) }
.op-btn.active{
  background:var(--green);
  color:#fff;
  border-color:var(--green-dark);
  box-shadow:0 0 0 3px rgba(52,168,83,.25);
}
.op-btn[disabled]{ opacity:.5; cursor:not-allowed }

/* ========= CEVAP GRID ========= */
#choices{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:14px;
  margin:18px 0 4px;
}
.choice-btn{
  min-width:80px;
  min-height:80px;
  padding:20px 14px;
  border-radius:10px;
  border:none;
  color:#000; /* daha görünür */
  font:700 24px/1 ui-monospace, monospace;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 6px 12px rgba(0,0,0,.25);   /* belirgin gölge */
}
.choice-btn:hover{
  transform:scale(1.08);
  box-shadow:0 8px 16px rgba(0,0,0,.35);
}
.choice-btn.correct{
  background:#34A853 !important; color:#fff !important;
}
.choice-btn.wrong{
  background:#e53935 !important; color:#fff !important;
}
.choice-btn[disabled]{ opacity:.9; cursor:not-allowed }

/* ========= FEEDBACK ========= */
#feedback{
  margin-top:12px;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  min-height:56px;
}
#fbText{ margin-bottom:6px; font-weight:700 }
#feedback .hud-inline{
  display:flex; gap:16px; flex-wrap:wrap;
  color:var(--muted);
}
#feedback .hud-inline strong{ color:var(--text) }

/* ========= “SON İŞLEMLER” BUTONU + TELİF ========= */
.history-btn-wrap{ text-align:center; margin-top:20px }
.history-btn{
  background:var(--blue);
  color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-size:16px; font-weight:700;
  cursor:pointer;
  transition:.15s background ease, .15s transform ease;
}
.history-btn:hover{ background:var(--blue-dark); transform:translateY(-1px) }

/* telif metni main içinde, butonun altında */
.footer-text{
  text-align:center;
  font-size:.9em;
  color:#666;
  margin:12px auto 0 auto;
  width:90%;
  max-width:600px;
}

/* ========= MODAL (Son İşlemler) ========= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background-color:rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
}
.modal-content{
  background:#fff; padding:20px; border-radius:12px;
  width:90%; max-width:560px; max-height:80%; overflow-y:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.modal-content h2{ margin:0 0 10px 0; font-size:24px }
.modal-content ul{ list-style:none; margin:0; padding:0 }
.modal-content li{
  font-size:20px; margin:8px 0; border-bottom:1px solid var(--border); padding-bottom:6px;
}
.close{ float:right; font-size:28px; font-weight:bold; cursor:pointer; line-height:1 }
.close:hover{ color:var(--danger) }

/* ========= SABİT FOOTER (tek satır) ========= */
footer{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  background:#fff;
  border-top:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  z-index:100;
}

/* Sol: Sıfırla */
.reset-btn{
  background:var(--danger);
  color:#fff;
  border:none; border-radius:8px;
  padding:10px 18px;
  font-size:16px; font-weight:700;
  cursor:pointer;
  transition:.15s background ease, .15s transform ease;
}
.reset-btn:hover{ background:var(--danger-dark); transform:translateY(-1px) }

/* Orta: Mod seçimi ortalı kalsın */
#mode-center{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
}
#modeSelect{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  font-size:15px;
}
.mode{ color:var(--muted); font-weight:700 }

/* Sağ: Tam Ekran */
.fullscreen-btn{
  background:var(--green);
  color:#fff;
  border:none; border-radius:8px;
  padding:10px 18px;
  font-size:16px; font-weight:700;
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease;
}
.fullscreen-btn:hover{ background:var(--green-dark); transform:translateY(-1px) }

/* ========= FULLSCREEN ORTALAMA ========= */
/* JS, fullscreen açıldığında <body>’ye fullscreen-active sınıfını ekliyor */
body.fullscreen-active{
  padding-top:0;
  padding-bottom:0;
}
body.fullscreen-active .fixed-header,
body.fullscreen-active footer{
  display:none; /* header/footer gizle ki tam ortalansın */
}
body.fullscreen-active main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--gap);
}

/* Tarayıcı uyumluluğu için :fullscreen seçicisi */
:fullscreen .fixed-header,
:-webkit-full-screen .fixed-header { display:none; }
:fullscreen footer,
:-webkit-full-screen footer { display:none; }
:fullscreen main,
:-webkit-full-screen main {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--gap);
}

/* ========= ODAK ========= */
button:focus-visible, select:focus-visible{
  outline:3px solid rgba(24,119,242,.45);
  outline-offset:2px;
}

/* --- MOBÄ°L DESTEKLENMÄ°YOR UYARISI --- */
.mobile-not-supported-message {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #e0f2f7;
}

.mobile-not-supported-message .message-content {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 40px 24px; /* sol-sağ boşluk için artırıldı */
  max-width: 500px;
  width: calc(100% - 40px); /* soldan ve saÄŸdan 20px boÅŸluk */
  margin: 0 20px; /* ekranın kenarlarıyla arasında boşluk */
  color: #333;
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

.mobile-not-supported-message h2 {
  font-size: 2em;
  color: #3b5998;
  margin-bottom: 20px;
}

.mobile-not-supported-message p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  html, body {
    overflow: hidden !important;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .mobile-not-supported-message {
    display: flex !important;
  }

  .fixed-header,
  #stickyTop,
  #stickyToggleBtnContainer,
  .drop-container,
  .control-buttons,
  .warning-box {
    display: none !important;
  }
}

/* ========================= */
/* === OVERRIDE BLOĞU ===   */
/* Fullscreen’da footer görünür kalsın, main tam ortaya gelsin */
body.fullscreen-active{
  padding-bottom: var(--footer-h) !important;
}
body.fullscreen-active footer{
  display: flex !important;
}
:fullscreen footer,
:-webkit-full-screen footer{
  display: flex !important;
}
body.fullscreen-active main{
  min-height: calc(100vh - var(--footer-h)) !important;
}
:fullscreen main,
:-webkit-full-screen main{
  min-height: calc(100vh - var(--footer-h)) !important;
}

/* === FULLSCREEN HEADER GÖRÜNSÜN & ORTALAMA DÜZELTME === */
body.fullscreen-active{
  /* header ve footer varken ana içerik tam ortaya gelsin */
  padding-top: 60px !important;                 /* header yüksekliği */
  padding-bottom: var(--footer-h) !important;   /* footer yüksekliği */
}
body.fullscreen-active .fixed-header{
  display: flex !important;                     /* header gizlenmesin */
}
:fullscreen .fixed-header,
:-webkit-full-screen .fixed-header{
  display: flex !important;
}

/* Ana içerik: toplam yükseklikten header+footer düş */
body.fullscreen-active main{
  min-height: calc(100vh - 60px - var(--footer-h)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 var(--gap) !important;
}
:fullscreen main,
:-webkit-full-screen main{
  min-height: calc(100vh - 60px - var(--footer-h)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 var(--gap) !important;
}