/* =========================================================
   TEMA VARYANTLARI + VARSAYILANLAR
   ========================================================= */





/* Yeşil Elma (yesil-elma) */
:root{
  --bg-color: linear-gradient(135deg, #eaffef, #dbffe9);
  --accent-color: #22c55e; /* green apple */
  --text-color: #0b2c14;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(34,197,94,.25);
  --button-shadow: 0 4px 10px rgba(34,197,94,.30);
}


/* Varsayılan en başta Portakal (portakal) */
:root[data-theme="lavanta"]{
  --bg-color: linear-gradient(135deg, #fff1e6, #ffe4d5);
  --accent-color: #f97316; /* orange */
  --text-color: #3a1b0b;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(249,115,22,.25);
  --button-shadow: 0 4px 10px rgba(249,115,22,.30);
}


/* LAVANTA */
:root[data-theme="lavanta"]{
  --bg-color: linear-gradient(135deg, #f5f3ff, #f3e8ff);
  --accent-color: #8b5cf6;
  --text-color: #2b1742;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(139,92,246,.25);
  --button-shadow: 0 4px 10px rgba(139,92,246,.30);
}

   :root[data-theme="default"]{
  /* Varsayılan (pastel) — tema atanamazsa fallback */
  --bg-color: linear-gradient(to right, #fce4ec, #e0f7fa);
  --accent-color: #ba68c8;
  --text-color: #333;
  --card-bg: #ffffffcc;
  --shadow: 0 0 20px rgba(0,0,0,.12);
  --button-shadow: 0 4px 10px rgba(186, 104, 200, 0.30);
}

/* Cam Göbeği (camgobegi) */
:root[data-theme="camgobegi"]{
  --bg-color: linear-gradient(135deg, #e0fbff, #c7f9ff);
  --accent-color: #06b6d4; /* cam göbeği / cyan */
  --text-color: #083344;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(6,182,212,.25);
  --button-shadow: 0 4px 10px rgba(6,182,212,.30);
}

/* Mint (mint) */
:root[data-theme="mint"]{
  --bg-color: linear-gradient(135deg, #e6fff3, #ccffe6);
  --accent-color: #10b981; /* mint / emerald */
  --text-color: #052e24;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(16,185,129,.25);
  --button-shadow: 0 4px 10px rgba(16,185,129,.30);
}





/* Turkuaz (turkuaz) */
:root[data-theme="turkuaz"]{
  --bg-color: linear-gradient(135deg, #e0fffb, #ccfbf1);
  --accent-color: #14b8a6; /* teal/turquoise */
  --text-color: #062c29;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(20,184,166,.25);
  --button-shadow: 0 4px 10px rgba(20,184,166,.30);
}

/* Lavanta (lavanta) */
:root[data-theme="lavanta"]{
  --bg-color: linear-gradient(135deg, #f5f3ff, #f3e8ff);
  --accent-color: #8b5cf6; /* lavender/violet */
  --text-color: #2b1742;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(139,92,246,.25);
  --button-shadow: 0 4px 10px rgba(139,92,246,.30);
}

/* Gül (gul) */
:root[data-theme="gul"]{
  --bg-color: linear-gradient(135deg, #ffe4e6, #fecdd3);
  --accent-color: #e11d48; /* rose */
  --text-color: #3f0a16;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(225,29,72,.25);
  --button-shadow: 0 4px 10px rgba(225,29,72,.30);
}

/* Mercan (mercan) */
:root[data-theme="mercan"]{
  --bg-color: linear-gradient(135deg, #ffe5e9, #ffdbe0);
  --accent-color: #fb7185; /* coral */
  --text-color: #3a1215;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(251,113,133,.25);
  --button-shadow: 0 4px 10px rgba(251,113,133,.30);
}

/* Limon (limon) */
:root[data-theme="limon"]{
  --bg-color: linear-gradient(135deg, #fef9c3, #fef3c7);
  --accent-color: #eab308; /* lemon/yellow */
  --text-color: #3a2e03;
  --card-bg: #fffff0cc;
  --shadow: 0 0 20px rgba(234,179,8,.25);
  --button-shadow: 0 4px 10px rgba(234,179,8,.30);
}

/* Grafit (grafit) — koyu tema */
:root[data-theme="grafit"]{
  --bg-color: linear-gradient(135deg, #0f172a, #111827);
  --accent-color: #94a3b8; /* slate */
  --text-color: #e5e7eb;
  --card-bg: #0b1220cc;
  --shadow: 0 0 24px rgba(148,163,184,.30);
  --button-shadow: 0 4px 10px rgba(148,163,184,.35);
}


/* Pastel */
:root[data-theme="pastel"]{
  --bg-color: linear-gradient(to right, #fce4ec, #e0f7fa);
  --accent-color: #ba68c8;
  --text-color: #333;
  --card-bg: #ffffffcc;
  --shadow: 0 0 20px rgba(0,0,0,.12);
  --button-shadow: 0 4px 10px rgba(186,104,200,.30);
}

/* Ocean */
:root[data-theme="ocean"]{
  --bg-color: linear-gradient(135deg, #e0f2fe, #c7f9ff);
  --accent-color: #0284c7;
  --text-color: #0f2236;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(2,132,199,.25);
  --button-shadow: 0 4px 10px rgba(2,132,199,.30);
}



/* Forest */
:root[data-theme="forest"]{
  --bg-color: linear-gradient(135deg, #e6fff1, #d2ffe5);
  --accent-color: #16a34a;
  --text-color: #0b2c14;
  --card-bg: #ffffffd8;
  --shadow: 0 0 20px rgba(22,163,74,.25);
  --button-shadow: 0 4px 10px rgba(22,163,74,.30);
}

/* Midnight
:root[data-theme="midnight"]{
  --bg-color: linear-gradient(135deg, #0b1220, #0f172a);
  --accent-color: #60a5fa;
  --text-color: #e2e8f0;
  --card-bg: #101827cc;
  --shadow: 0 0 24px rgba(0,0,0,.35);
  --button-shadow: 0 4px 10px rgba(96,165,250,.35);
} */ 

/* =========================================================
   GENEL
   ========================================================= */
.hidden { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
  font-family: 'Segoe UI', sans-serif;
  color: var(--text-color);
}

.wrapper{
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 12px;
  text-align: center;
}

header img{
  max-width: 280px;
  height: auto;
  margin: 2px auto;
  display: block;
}

.intro-alert{
  background: var(--card-bg);
  border-left: 6px solid var(--accent-color);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.5;
  flex: 1;
}


/* =========================================================
   KART / BAŞLIKLAR
   ========================================================= */
.container {
  width: 100%;
  max-width: 440px;
  text-align: center;
  padding: 0 12px;
}

h2 {
  color: var(--accent-color);
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 24px;
}

.flashcard {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  color: var(--text-color);
  cursor: pointer;
  transition: all .3s ease;
}

.flashcard:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 16px rgba(0,0,0,.06);
  transform: translateY(-4px);
}

.flashcard:active {
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transform: translateY(0) scale(0.98);
  transition: all .1s ease;
}

.visual img, .visual div { margin-bottom: 18px; }

.visual img {
  width: 300px;
  height: 350px;  /* Daha kompakt yükseklik */
  object-fit: cover;
  border-radius: 16px;
}

.hangul {
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-color);
  vertical-align: middle;
}

.play-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  margin-left: 8px;
  color: var(--accent-color);
  vertical-align: middle;
}

/* =========================================================
   BUTONLAR
   ========================================================= */
button.global-btn {
  cursor: pointer;
  border: none;
  outline: 0;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 9999px;
  color: #fff;
  background: var(--accent-color);
  font-weight: 600;
  box-shadow: var(--button-shadow);
  transition: 0.2s;
}

button.global-btn:hover { transform: translateY(-1px); opacity: .95; }

/* Set/Sayacı vb. */
#set-button,
#skip-button,
#toggle-button,
#home-button {
  background: var(--accent-color);
  color: #fff;
}

#set-button { margin-right: 8px; }

#set-button:hover,
#skip-button:hover,
#toggle-button:hover,
#home-button:hover { filter: brightness(.95); }

#countdown {
  display: inline-block;
  min-width: 38px;
  padding: 10px 12px;
  background: var(--accent-color);
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  margin-left: 8px;
}

/* =========================================================
   SEÇENEK / MEANING-KARTLARI
   ========================================================= */
.set-option {
  background: rgba(255,255,255,0.30);
  border: 1px solid var(--accent-color);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0;
  display: block;
  color: var(--text-color);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: 0.2s;
}

.set-option:hover {
  background: rgba(255,255,255,0.50);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.meaning-card {
  background: rgba(255,255,255,0.85);
  border: 2px dashed var(--accent-color);
  border-radius: 16px;
  padding: 14px;
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #7b1fa2;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  min-height: 24px;
  line-height: 1.4;
}

.meaning-card:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* =========================================================
   ANA SAYFA KART BAĞLANTILARI
   ========================================================= */
.logo-img {
  max-width: 280px;
  display: block;
  margin: 2px auto 0;
  padding: 0;
  line-height: 0;
}

.card-link {
  background: rgba(255,255,255,0.70);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0,0,0,.10);
  margin: 24px auto;
  padding: 20px;
  max-width: 600px;
  transition: 0.3s ease;
  cursor: pointer;
}

.card-link:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.15), 0 0 16px rgba(0,0,0,.08);
  transform: translateY(-5px);
}

.card-link:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.card-title {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--accent-color);
  transition: color .25s ease, text-shadow .25s ease;
}

.card-desc {
  margin-top: 8px;
  font-size: 1em;
  color: #555;
  line-height: 1.5;
}

.card-link:hover .card-title{
  color: #00b8ff;
  text-shadow: 0 0 6px rgba(0,184,255,.35);
}

.card-link .card-title,
.card-link .card-desc { -webkit-user-select: none; user-select: none; }

.card-link .card-title a { -webkit-user-select: text; user-select: text; }

/* =========================================================
   FOOTER
   ========================================================= */
.k-footer {
  background: linear-gradient(to right, rgba(255,255,255,0.60), rgba(255,255,255,0.80));
  padding: 20px 10px;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text-color);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.10);
  margin-top: 40px;
}

.footer-links {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

/* Footer butonları: açık aksan rengi */
.footer-link {
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;

  /* Beyaz yerine aksanın çok açık tonu */
  background: color-mix(in srgb, var(--accent-color) 16%, white);
  color: color-mix(in srgb, var(--accent-color) 65%, black);

  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, white);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: 0.25s ease;
}

.footer-link:hover {
  background: color-mix(in srgb, var(--accent-color) 24%, white);
  color: color-mix(in srgb, var(--accent-color) 70%, black);
  transform: translateY(-1px);
}

.footer-link.active {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
}