/* İspanyolca Kutusu - White mode UI (no dark mode) */

:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-sm: 0 8px 22px rgba(2,6,23,.06);
  /* Brand colors */
  --brand-yellow: #f1bf00;
  --brand-red: #92151a;

  /* UI accents */
  --primary: var(--brand-red);
  --primary-soft: rgba(146,21,26,.12);
  --cta: var(--brand-yellow);
  --cta-soft: rgba(241,191,0,.16);
  --success: #16a34a;
  --warning: var(--brand-yellow);
  --danger: var(--brand-red);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1120px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1200px 600px at 15% -10%, rgba(241,191,0,.18), transparent 60%),
              radial-gradient(900px 500px at 95% 0%, rgba(146,21,26,.10), transparent 55%),
              var(--bg);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  overflow-x: hidden; /* mobilde kart taşmasını engelle */
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.skip-link{
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--surface);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  z-index: 50;
}
.skip-link:focus{ left: 12px; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(226,232,240,.8);
}
.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.header-logo{
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain; /* oranı bozma */
  /* Header yüksekliğini bozmadan logoyu %25 büyüt */
  transform: scale(1.25);
  transform-origin: left center;
}
.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(241,191,0,.22), rgba(241,191,0,.08));
  border: 1px solid rgba(241,191,0,.45);
  display: grid;
  place-items: center;
}
.brand-mark svg{ width: 18px; height: 18px; color: var(--primary); }
.brand small{
  display: block;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  font-size: 12px;
  margin-top: -2px;
}

.nav{
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
}
.nav a,
.nav button{
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.nav a[aria-current="page"],
.nav button[aria-current="page"]{
  color: var(--text);
  background: rgba(241,191,0,.16);
  border: 1px solid rgba(241,191,0,.35);
}

.actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Account dropdown */
.account-wrap{ position: relative; }
.account-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
.account-btn:hover{
  border-color: rgba(241,191,0,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}
.account-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(260px, calc(100vw - 32px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(2,6,23,.18);
  padding: 8px;
  display: none;
  z-index: 60;
}
.account-menu[aria-hidden="false"]{ display: block; }
.account-menu .email{
  padding: 10px 10px 8px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.72);
  word-break: break-word;
}
.account-menu a,
.account-menu button{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #0b0f1a;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
}
.account-menu a:hover,
.account-menu button:hover{
  background: rgba(241,191,0,.14);
  border-color: rgba(241,191,0,.28);
}
.account-menu .danger{
  color: #92151a;
}
.account-menu .divider{
  height: 1px;
  background: rgba(226,232,240,.95);
  margin: 6px 8px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}

.btn-primary{
  border-color: rgba(241,191,0,.55);
  background: var(--cta);
  color: #0b0f1a; /* sarıda okunabilirlik */
}
.btn-primary:hover{
  border-color: rgba(241,191,0,.75);
  box-shadow: 0 12px 28px rgba(241,191,0,.22);
}
.btn-ghost{
  background: transparent;
}
.btn-danger{
  border-color: rgba(146,21,26,.30);
  background: rgba(146,21,26,.10);
  color: #92151a;
}
.btn-success{
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.14);
  color: #0f5132;
}
.btn-success:hover{
  box-shadow: 0 12px 28px rgba(22,163,74,.18);
}
.btn-soft{
  border-color: rgba(241,191,0,.55);
  background: rgba(241,191,0,.18);
  color: #0b0f1a;
}
.btn-soft:hover{
  box-shadow: 0 12px 28px rgba(241,191,0,.16);
}

.main{
  padding: 28px 0 56px;
}

.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: none;
  justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(226,232,240,.85);
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
}
.bottom-nav .inner{
  width: min(var(--max), calc(100% - 16px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bn-item{
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.01em;
  background: transparent;
  appearance: none;
}
.bn-item svg{
  width: 20px;
  height: 20px;
  color: currentColor;
}
.bn-item .bn-icon{
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}
.bn-item[aria-current="page"]{
  color: var(--text);
  background: rgba(241,191,0,.18);
  border-color: rgba(241,191,0,.42);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.bn-item:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}

/* Öğren menüsü (bottom sheet) */
.learn-backdrop{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: rgba(2,6,23,.48);
}
.learn-backdrop[aria-hidden="false"]{ display: flex; }
.learn-sheet{
  width: min(560px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.85);
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 80px rgba(2,6,23,.42);
  overflow: hidden;
}
.learn-handle{
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: rgba(148,163,184,.5);
  margin: 10px auto 8px;
}
.learn-title{
  text-align: center;
  font-weight: 950;
  letter-spacing: -0.02em;
  padding: 0 14px 12px;
}
.learn-list{
  display: grid;
  gap: 8px;
  padding: 0 12px 14px;
}
.learn-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(247,248,252,.85);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.learn-item svg{
  width: 20px;
  height: 20px;
}
.learn-item[aria-current="page"]{
  background: rgba(241,191,0,.20);
  border-color: rgba(241,191,0,.55);
  color: #0b0f1a;
}

.hero{
  padding: 18px 0 6px;
}
.hero-grid{
  display: grid;
  gap: 18px;
}
.hero h1{
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero p{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  max-width: 58ch;
}
.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,248,252,.9));
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
}
.hero-card .kpi{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.kpi .item{
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.82);
  border-radius: 14px;
  padding: 10px;
}
.kpi strong{
  display: block;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.kpi span{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.grid-3{
  display: grid;
  gap: 14px;
}

.roadmap-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.roadmap{
  margin-top: 14px;
}
.rm-chapter{
  margin-top: 18px;
}
.rm-chapter-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rm-chapter-title{
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 18px;
}
.rm-chapter-sub{
  font-weight: 800;
  font-size: 13px;
}

.rm-path{
  position: relative;
  padding: 8px 0 10px;
}
.rm-path::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    rgba(146,21,26,.25) 0px,
    rgba(146,21,26,.25) 10px,
    transparent 10px,
    transparent 18px
  );
  border-radius: 999px;
  z-index: 0;
}

.rm-step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.rm-rail{ display:none; }

.rm-dot{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(241,191,0,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 36px rgba(2,6,23,.12);
  font-weight: 950;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  z-index: 2;
}
.rm-dot:disabled{
  cursor: not-allowed;
  border-color: rgba(148,163,184,.45);
  color: rgba(71,85,105,.65);
  box-shadow: none;
  background: rgba(255,255,255,.78);
}
.rm-step[data-status="active"] .rm-dot:hover{
  transform: scale(1.06);
  border-color: rgba(146,21,26,.45);
}
.rm-step[data-status="done"] .rm-dot:hover{
  transform: scale(1.05);
}

.rm-card{
  max-width: 320px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  padding: 12px 12px;
  transition: transform 140ms ease, box-shadow 140ms ease;
  z-index: 1;
}
.rm-left .rm-card{ justify-self: end; text-align: right; }
.rm-right .rm-card{ justify-self: start; text-align: left; }
.rm-step[data-status="active"] .rm-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,.10);
}
.rm-card-top{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.rm-left .rm-card-top{ justify-content: flex-end; }
.rm-emoji{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(241,191,0,.45);
  background: rgba(241,191,0,.16);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.rm-card strong{
  font-size: 14px;
  letter-spacing: -0.02em;
}
.rm-card-sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
}

.rm-step[data-status="done"] .rm-dot{
  background: var(--success); /* yeşil dolu */
  color: #ffffff; /* beyaz tik */
  border-color: rgba(22,163,74,.85);
  box-shadow: 0 16px 36px rgba(22,163,74,.22);
}
.rm-step[data-status="active"] .rm-dot{
  border-color: rgba(146,21,26,.55);
}
.rm-step[data-status="locked"] .rm-card{
  opacity: .65;
}
.rm-step[data-status="coming"] .rm-card{
  opacity: .55;
}

@media (max-width: 520px){
  .rm-step{
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .rm-path::before{
    left: 28px;
    transform: none;
  }
  .rm-dot{
    width: 52px;
    height: 52px;
  }
  .rm-card{
    max-width: unset;
    width: 100%;
    text-align: left !important;
    justify-self: stretch !important;
  }
  .rm-card-top{ justify-content: flex-start !important; }
}

.rm-switch{
  display: flex;
  justify-content: center;
  margin: 18px 0 8px;
}

/* Masaüstü hizalama: dot her zaman çizginin üstünde (ortada) */
@media (min-width: 521px){
  .rm-step{
    display: block;
    padding: 18px 0;
  }
  .rm-dot{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .rm-step[data-status="active"] .rm-dot:hover{
    transform: translate(-50%, -50%) scale(1.06);
  }
  .rm-step[data-status="done"] .rm-dot:hover{
    transform: translate(-50%, -50%) scale(1.05);
  }
  .rm-card{
    max-width: 360px;
  }
  .rm-left .rm-card{
    margin-right: calc(50% + 44px);
    margin-left: 0;
    text-align: right;
  }
  .rm-right .rm-card{
    margin-left: calc(50% + 44px);
    margin-right: 0;
    text-align: left;
  }
}
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.card h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.card p{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.section-title{
  margin: 24px 0 10px;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}

.form{
  display: grid;
  gap: 12px;
}
.field label{
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.field .hint{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.95);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.input:focus{
  border-color: rgba(146,21,26,.38);
  box-shadow: 0 0 0 5px rgba(146,21,26,.10);
}

.two-col{
  display: grid;
  gap: 16px;
  align-items: start;
}

.muted{ color: var(--muted); }
.badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(247,248,252,.9);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  gap: 8px;
}
.badge .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(146,21,26,.12);
}

.toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 12px;
}
.toolbar .left{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.level-tabs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
}
.level-tabs::-webkit-scrollbar{ display: none; }
.level-tab{
  appearance: none;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.level-tab[aria-selected="true"]{
  background: rgba(241,191,0,.20);
  border-color: rgba(241,191,0,.55);
  color: #0b0f1a;
  box-shadow: 0 12px 26px rgba(241,191,0,.18);
}
.level-tab:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}

.deck-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobil: 2 */
}
.deck-card{
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,248,252,.92));
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 10px 26px rgba(2,6,23,.12);
  overflow: hidden;
  transform: rotate(var(--tilt, -0.8deg));
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.deck-card:hover{
  transform: rotate(0deg) translateY(-1px);
  border-color: rgba(241,191,0,.50);
  box-shadow: 0 16px 36px rgba(2,6,23,.14);
}
.deck-card:active{
  transform: rotate(0deg) translateY(0);
}
.deck-card:focus-within{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}
.deck-card::after{
  /* küçük köşe kıvrımı */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(225deg, rgba(241,191,0,.30), rgba(241,191,0,.08));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid rgba(241,191,0,.24);
  border-bottom: 1px solid rgba(241,191,0,.18);
  opacity: .9;
}
.deck-top{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
.deck-emoji{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(241,191,0,.45);
  background: rgba(241,191,0,.16);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.deck-title{
  margin: 10px 0 0;
  font-size: 15px;
  letter-spacing: -0.02em;
  font-weight: 950;
  line-height: 1.15;
}

.list{
  display: grid;
  gap: 12px;
}
.row{
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.9);
}
.row-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.row-title{
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.row-title strong{
  font-size: 15px;
  letter-spacing: -0.015em;
}
.row-title span{
  color: var(--muted);
  font-size: 13px;
}

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 40;
}
.modal-backdrop[aria-hidden="false"]{ display: flex; }
.modal{
  width: min(560px, 100%);
  background: var(--surface);
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 28px 70px rgba(2,6,23,.35);
  overflow: hidden;
}
.modal header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.modal header strong{
  letter-spacing: -0.02em;
}
.modal .body{ padding: 16px; }
.modal .footer{
  padding: 14px 16px;
  border-top: 1px solid rgba(226,232,240,.9);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.flashcard{
  width: min(560px, 100%);
  margin: 0 auto;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
.flashcard.tilt{
  transform: none; /* 3D flip için perspective temiz kalsın */
}
.flashcard-inner{
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.85); /* tek gri çerçeve */
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 45px rgba(2,6,23,.16);
  overflow: hidden; /* kartın her şeyi çerçevenin içinde */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transform-origin: 50% 50%;
  transform: rotate(-0.45deg) rotateY(0deg);
  transition: none;
}
.flashcard.is-flipped .flashcard-inner{
  /* içerik swap ile kontrol ediliyor */
  transform: rotate(-0.45deg) rotateY(0deg);
}
.flashcard.is-flipping .flashcard-inner{
  animation: card-flip 520ms cubic-bezier(.2,.8,.2,1) both;
}
.flashcard-face{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0);
}
.flashcard-front{
  transform: translateZ(1px);
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms linear 0ms, visibility 0ms linear 0ms;
}
.flashcard-back{
  transform: translateZ(1px);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms linear 0ms, visibility 0ms linear 140ms;
}

/* Safari/WebView fix: flip sırasında yüzleri zorla değiştir */
.flashcard.is-flipped .flashcard-front{
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms linear 0ms, visibility 0ms linear 140ms;
}
.flashcard.is-flipped .flashcard-back{
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transition: opacity 140ms linear 0ms, visibility 0ms linear 0ms;
}

@keyframes card-flip{
  0%{ transform: rotate(-0.45deg) rotateY(0deg); }
  50%{ transform: rotate(-0.45deg) rotateY(90deg); }
  100%{ transform: rotate(-0.45deg) rotateY(0deg); }
}
.flashcard .term{
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.03em;
  font-weight: 950;
}
.flashcard .meaning{
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  font-weight: 800;
}
.flashcard .meaning .flag{
  margin-right: 8px;
}
.flashcard .example{
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.flashcard .example.muted{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.flashcard .hl{
  font-weight: 950;
  color: var(--primary);
}
.flashcard.is-animating{
  animation-duration: .22s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.flashcard.is-animating[data-anim="swap"]{ animation-name: card-swipe; }
.flashcard.is-animating[data-anim="to-back"]{ animation-name: card-to-back; }
@keyframes card-swipe{
  0%{ transform: rotate(-0.6deg) translateX(0); opacity: 1; }
  45%{ transform: rotate(-4deg) translateX(-18px); opacity: .35; }
  55%{ transform: rotate(3deg) translateX(18px); opacity: .35; }
  100%{ transform: rotate(-0.6deg) translateX(0); opacity: 1; }
}
@keyframes card-to-back{
  0%{ transform: rotate(-0.6deg) translate(0,0) scale(1); opacity: 1; }
  55%{ transform: rotate(2.2deg) translate(22px, 18px) scale(.92); opacity: .25; }
  100%{ transform: rotate(-0.6deg) translate(0,0) scale(1); opacity: 1; }
}

.fly-card{
  position: fixed;
  z-index: 90;
  left: 0;
  top: 0;
  width: min(560px, calc(100% - 40px));
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(2,6,23,.16);
  font-weight: 950;
  letter-spacing: -0.02em;
  text-align: center;
  transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(-0.45deg) scale(1);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.fly-card.go{
  animation: fly-to-kutu 1800ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes fly-to-kutu{
  0%{
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(-0.45deg) scale(1);
    opacity: 1;
  }
  70%{
    transform: translate(calc(var(--sx, 0px) + (var(--dx, 0px) * .55)), calc(var(--sy, 0px) + (var(--dy, 0px) * .55))) rotate(-5deg) scale(.98);
    opacity: .98;
  }
  100%{
    transform: translate(calc(var(--sx, 0px) + var(--dx, 0px)), calc(var(--sy, 0px) + var(--dy, 0px))) rotate(-14deg) scale(0.16);
    opacity: .22;
  }
}

.study-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.study-actions .btn{
  min-width: 150px;
}

.study-audio{
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn svg{ width: 22px; height: 22px; }
.icon-btn:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}

.study-heading{
  text-align: center;
  padding: 6px 0 2px;
  position: relative;
}
.study-title{
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 16px;
}
.study-count{
  margin-top: 4px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.study-back{
  position: absolute;
  left: 0;
  top: 0;
}

.study-wrap{
  display: grid;
  gap: 12px;
}

.progress-top{
  position: sticky;
  top: var(--topbar-offset, 64px);
  z-index: 29;
  background: transparent; /* ayrı bir beyaz şerit olmasın */
  backdrop-filter: none;
  border-bottom: none;
  padding: 8px 0;
}
.progress-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(241,191,0,.12);
  border: 1px solid rgba(241,191,0,.35);
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(241,191,0,1), rgba(241,191,0,.72));
  box-shadow: 0 10px 24px rgba(241,191,0,.22);
  transition: width 260ms ease;
}
.completed-screen{
  width: min(560px, 100%);
  margin: 22px auto 6px;
  min-height: calc(100vh - var(--topbar-offset, 64px) - 56px - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.completed-screen-inner{
  width: 100%;
  padding: 18px 14px;
}
.completed-big{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.completed-big .check{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--brand-yellow);
  color: #0b0f1a;
  box-shadow: 0 14px 30px rgba(241,191,0,.22);
}

/* ---------- Matching (Duolingo-style) ---------- */
.match-wrap{
  width: min(720px, 100%);
  margin: 0 auto;
}
.match-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.match-col{
  display: grid;
  gap: 10px;
}
.match-tile{
  appearance: none;
  width: 100%;
  text-align: center;
  padding: 12px 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.94);
  color: #0b0f1a;
  font-weight: 950;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
  user-select: none;
}
.match-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(241,191,0,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}
.match-tile:active{
  transform: translateY(0);
}
.match-tile:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}
.match-tile.is-selected{
  background: rgba(241,191,0,.20);
  border-color: rgba(241,191,0,.65);
  color: #0b0f1a;
  box-shadow: 0 16px 34px rgba(241,191,0,.18);
}
.match-tile.is-wrong{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.65);
  color: #7f1d1d;
  box-shadow: 0 16px 34px rgba(239,68,68,.14);
}
.match-tile.is-correct{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.65);
  color: #14532d;
  box-shadow: 0 16px 34px rgba(22,163,74,.14);
  cursor: default;
}
.match-tile:disabled{
  opacity: .78;
  cursor: default;
  transform: none;
}

@media (max-width: 380px){
  .match-tile{
    padding: 11px 10px;
    min-height: 46px;
    font-size: 13px;
  }
}

/* ---------- Quiz ---------- */
.quiz-card{
  width: min(640px, 100%);
  margin: 0 auto;
}
.quiz-option{
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.94);
  color: #0b0f1a;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
  user-select: none;
}
.quiz-option:hover{
  transform: translateY(-1px);
  border-color: rgba(241,191,0,.55);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}
.quiz-option:active{ transform: translateY(0); }
.quiz-option:focus-visible{
  outline: 3px solid rgba(146,21,26,.22);
  outline-offset: 2px;
}
.quiz-option.is-wrong{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.65);
  color: #7f1d1d;
}
.quiz-option.is-correct{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.65);
  color: #14532d;
}
.quiz-option:disabled{
  opacity: .82;
  cursor: default;
  transform: none;
}

.quiz-feedback{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 65;
  padding: 0 12px;
  display: none;
}
.quiz-feedback[aria-hidden="false"]{ display: block; }
.quiz-feedback .inner{
  width: min(760px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 22px 55px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
}
.quiz-feedback.is-success .inner{
  outline: 3px solid rgba(22,163,74,.18);
}
.quiz-feedback.is-fail .inner{
  outline: 3px solid rgba(146,21,26,.20);
}
.quiz-feedback .title{
  font-weight: 950;
  letter-spacing: -0.02em;
}

@media (max-width: 859px){
  /* bottom nav var → bar yukarı çıksın */
  .quiz-feedback{ bottom: calc(56px + 12px); }
}

@media (prefers-reduced-motion: reduce){
  .flashcard.is-animating{ animation: none; }
  .deck-card{ transition: none; }
}

.banner{
  border: 1px solid rgba(241,191,0,.45);
  background: rgba(241,191,0,.16);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #0f172a;
}
.banner strong{ letter-spacing: -0.01em; }
.banner p{
  margin: 6px 0 0;
  color: rgba(15,23,42,.86);
  font-size: 13px;
}

.footer{
  padding: 22px 0 34px;
  color: var(--muted);
  font-size: 13px;
}
.footer .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(226,232,240,.85);
  padding-top: 18px;
}
.footer a{
  color: var(--muted);
  font-weight: 700;
}

@media (min-width: 860px){
  .nav{ display: inline-flex; }
  .hero-grid{ grid-template-columns: 1.25fr .75fr; align-items: start; }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col{ grid-template-columns: 1.2fr .8fr; }
  .row{ grid-template-columns: 1fr auto; align-items: center; }
  .header-logo{ height: 30px; }
  .deck-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* masaüstü: 3 */
}

@media (max-width: 859px){
  .bottom-nav{ display: flex; }
  .main{
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px){
  .container{ width: min(var(--max), calc(100% - 28px)); }
  .btn{ padding: 10px 12px; }
  .header-logo{ height: 26px; }
  .study-actions .btn{ min-width: 135px; }
  /* mobilde başlık/geri ile kart arası boşluk */
  .study-wrap{ margin-top: 20px; }
}