/* public/assets/style.css */

:root{
  --bg: #f5f1e9;
  --card: #fbf7ef;
  --ink: #222;
  --muted: #6b6b6b;
  --border: #1f1f1f;
  --shadow: 0 8px 0 rgba(0,0,0,.18);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
  --green: #20b46a;
  --green2:#10a85f;
  --pill:#ffffff;
  --danger:#ff7f7f;
  --warn:#ffd66e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a{color:inherit}
.container{max-width:980px;margin:0 auto;padding:14px 14px 30px}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#f5f1e9;
  padding:6px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.topbar-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between; /* ✅ buraya taşındı */
}







/* ===============================
   LOGO SWEEP – GERÇEK ÇALIŞAN
================================ */

.brand{
  display:flex;
  align-items:center;
  height:42px;
  text-decoration:none;
}

.brand-shine{
  position:relative;
  display:inline-block;
  overflow:hidden;
}

.brand-logo{
  height:50px;
  width:auto;
  display:block;
}

/* Sweep layer */
.brand-shine::after{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:50%;
  height:100%;

  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 70%
  );

  transform:skewX(-20deg);
  animation:logoSweep 6s linear infinite;
}

@keyframes logoSweep{
  0%   { left:-70%; }
  10%  { left:130%; }
  100% { left:130%; }
}

















.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width:860px){
  .grid{grid-template-columns: 1.1fr .9fr}
}

.card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.card.soft{
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--shadow-soft);
}
.card h1,.card h2,.card h3{margin:0 0 10px}
.h1{
  font-size:34px; letter-spacing:.2px;
}
.sub{
  color: var(--muted);
  font-weight:600;
  margin-top:-4px;
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight:800;
}

.input{
  width:100%;
  background:#fff;
  border: 3px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px;
  font-size: 16px;
  font-weight:700;
  outline:none;
}
.input:focus{box-shadow:0 0 0 4px rgba(32,180,106,.18)}

.btn{
  width:100%;
  border: 3px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
  background: var(--green);
  box-shadow: var(--shadow);
}
.btn:hover{background: var(--green2)}
.btn:active{transform: translateY(2px); box-shadow: 0 6px 0 rgba(0,0,0,.18)}
.btn.secondary{
  background:#fff;
}
.btn.secondary:hover{background:#f7f7f7}

.sep{height:1px;background:rgba(0,0,0,.10);margin:14px 0}

.kbd{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:8px;
}
@media (min-width:520px){
  .kbd{grid-template-columns: repeat(10, 1fr);}
}
.key{
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 10px 0;
  background:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.14);
  user-select:none;
  touch-action: manipulation;
}
.key:active{transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.14)}
.key[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.word{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;
  padding: 10px 0 4px;
}
.letter{
  width:40px;height:48px;
  border-bottom: 5px solid var(--border);
  display:grid;place-items:center;
  font-weight:900;font-size:28px;
}
.letter.space{
  width:18px;border-bottom:none;
}

.badge{
  display:inline-flex;align-items:center;
  border:2px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight:900;
  background:#fff;
}
.badge.danger{background:#ffe3e3}
.badge.warn{background:#fff2cf}

/* NEW: category + difficulty badges */
.badge-cat{background:#eaf6ff}
.badge-diff.easy{background:#e7ffef}
.badge-diff.medium{background:#fff2cf}
.badge-diff.hard{background:#ffe3e3}

.canvas-wrap{
  display:grid;place-items:center;
  background:#fff;
  border: 3px solid var(--border);
  border-radius: 18px;
  padding: 10px;
}

.toast{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  background:#fff;border:2px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
  font-weight:900;
  display:none;
  z-index:50;
}
.toast.show{display:block}


/* ===== PREMIUM ICON BUTTONS ===== */
.icon-btn{
  margin-left:auto;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.icon-btn:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.icon-btn:active{
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.icon{
  width:22px;
  height:22px;
  display:block
}

/* NEW: category selector bar */
.catbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.catbtn{
  border:2px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
  text-decoration:none;   /* ALT ÇİZGİYİ KESER */
}
.catbtn:active{transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.14)}
.catbtn[aria-current="true"]{
  background:#e7ffef;
}
.small{font-size:13px;color:var(--muted);font-weight:700}

/* -----------------------------
   AUTH MODAL
----------------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999; /* 🔥 Drawer'dan büyük */
  padding: 14px;
}

.modal-overlay.show{
  display:flex;
}
.modal{
  width:100%;
  max-width: 460px;
  box-shadow: var(--shadow-soft);
}
@supports (backdrop-filter: blur(6px)) {
  .modal-overlay{ backdrop-filter: blur(6px); }
}


/* --------------------------------
   GAME PAGE: H1 + SEO text gizle
   - Sadece oyun sayfasında (#app data-page="game")
   - display:none değil (SEO/PageSpeed uyumlu)
--------------------------------- */
#app[data-page="game"] .h1,
#app[data-page="game"] .seo-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.gchip{
  padding:4px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  min-width:0;
  flex:0 1 auto;
}

/* =========================================
   MOBILE GAME (minimal) - ONLY GAME PAGE
========================================= */
@media (max-width:768px){

  /* Container mobil (genel sayfalar bozulmasın diye sadece padding) */
  .container{
    max-width:100%;
    padding:12px 12px 20px;
  }


  /* Canvas mobilde hafiflet */
  #app[data-page="game"] .canvas-wrap{
    border:2px solid var(--border);
    border-radius:16px;
    padding:6px;
    margin-bottom:14px;
  }

  /* Kelime mobil */
#app[data-page="game"] .letter{
  width:34px;
  height:44px;
  font-size:24px;
  border-bottom:4px solid var(--border);
}

/* 🔥 BOŞLUK KARAKTERİ ALT ÇİZGİ ALMASIN */
#app[data-page="game"] .letter.space{
  width:18px;
  border-bottom:none;
}

  /* Klavye mobil: 7 kolon */
  #app[data-page="game"] .kbd{
    grid-template-columns:repeat(7, 1fr);
    gap:6px;
  }

  /* Tuşlar mobil */
  #app[data-page="game"] .key{
    padding:12px 0;
    font-size:15px;
    box-shadow:none; /* daha minimal */
  }
}


.canvas-wrap{
  min-height: 220px;   /* Hangman çizim alanı */
}

.word{
  min-height: 56px;    /* Kelime satırı */
}

.kbd{
  min-height: 240px;   /* Klavye alanı */
}







/* ===== PREMIUM FOOTER ===== */

.footer{
  margin-top:20px;
  padding:30px 20px 30px;
  background:#f5f1e9;
  border-top:1px solid rgba(0,0,0,.08);
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
}

.footer-top{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap:40px;
}

.footer-brand{
  max-width:320px;
}

.footer-logo{
  font-weight:1000;
  font-size:20px;
  margin-bottom:12px;
}

.footer-desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-col a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  opacity:.8;
  transition:.15s ease;
}

.footer-col a:hover{
  opacity:1;
  transform:translateX(4px);
}

.footer-title{
  font-weight:1000;
  margin-bottom:10px;
}

.footer-bottom{
  margin-top:50px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:13px;
  color:var(--muted);
}

/* ===== MOBILE FOOTER LAYOUT V2 ===== */

@media (max-width:768px){

  .footer{
    padding:40px 20px 24px;
  }

  .footer-top{
    display:flex;
    flex-direction:column;
    gap:30px;
  }

  /* ÜST MARKA BLOĞU */
  .footer-brand{
  text-align:left;
}

  .footer-logo{
    font-size:18px;
    margin-bottom:8px;
    text-align:left;
  }

  .footer-desc{
    font-size:13px;
    text-align:left;
  }

  /* OYUN + KURUMSAL YAN YANA */
  .footer-top{
    gap:24px;
  }

  .footer-col{
    flex:1;
  }

  .footer-top{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand{
    grid-column:1 / -1;
  }

  .footer-title{
    font-size:14px;
    margin-bottom:6px;
  }

  .footer-col a{
    font-size:13px;
  }

  .footer-bottom{
    margin-top:30px;
    padding-top:14px;
    font-size:12px;
    text-align:center;
  }

}






/* ==============================
   HERO PREMIUM V2
============================== */

.hero{
  text-align:center;
  padding:10px 20px 30px;
  position:relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,138,165,.30), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(120,214,255,.30), transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(255,214,110,.18), transparent 60%);
  pointer-events:none;
}

.hero-title{
  font-size:52px;
  font-weight:1000;
  letter-spacing:-1px;
  margin-bottom:18px;
}

.hero-sub{
  font-size:20px;
  color:var(--muted);
  max-width:700px;
  margin:0 auto 40px;
  line-height:1.6;
}

.hero-btn{
  max-width:340px;
  margin:0 auto;
  font-size:20px;
  border-radius:22px;
}

@media (max-width:768px){

.hero-title{
  font-size:38px;
}

.hero-sub{
  font-size:16px;
}

}





/* ==============================
   SEO BLOCK PREMIUM
============================== */

.seo-block{
margin-top:70px;
margin-bottom:20px;

max-width:1000px;
margin-left:auto;
margin-right:auto;

padding:40px 42px;
}

.seo-block h2{
font-size:28px;
font-weight:1000;
margin-top:28px;
margin-bottom:12px;
}

.seo-block p{
font-size:16px;
line-height:1.75;
color:#444;
margin-bottom:16px;
}

.seo-block strong{
font-weight:900;
color:#222;
}


/* MOBILE */

@media (max-width:768px){

.seo-block{
padding:24px 20px;
}

.seo-block h2{
font-size:22px;
}

.seo-block p{
font-size:15px;
}

}
/* ===== MINI PREMIUM STATS V2 ===== */

.mini-stats{
  margin-top:20px;
  margin-bottom:30px;
  display:flex;
  justify-content:center;
}

.mini-stats-inner{
  display:grid;
  grid-template-columns: repeat(4, auto);
  gap:20px;
  align-items:center;
}

.mini-stat{
  font-weight:900;
  font-size:14px;
  padding:10px 16px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-soft);
  text-align:center;
  white-space:nowrap;
}

/* MOBILE */
@media (max-width:768px){

  .mini-stats-inner{
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
    width:100%;
  }

  .mini-stat{
    padding:14px 10px;
    font-size:13px;
  }

}


/* ===== TOPBAR PREMIUM ===== */

/* public/assets/style.css */

/* Score list içindeki puan rozetleri için ayrı class */
.pill-score{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight:1000;
  font-size:13px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.brand-link{
  font-weight:1000;
  font-size:20px;
  letter-spacing:.5px;
  text-decoration:none;
  color:var(--ink);
  transition:.15s ease;
}

.brand-link:hover{
  opacity:.8;
}

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

/* ==============================
   HEADER SIGNIN BUTTON (PASTEL)
============================== */

.signin-btn{
  appearance:none;
  border:2px solid #1f1f1f;
  background:#f7c6d0; /* pastel pembe */
  color:#1f1f1f;
  font-weight:900;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 6px 0 rgba(0,0,0,.16);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:all .15s ease;
}

.signin-btn:hover{
  transform:translateY(-1px);
}

.signin-btn:active{
  transform:translateY(1px);
  box-shadow:0 5px 0 rgba(0,0,0,.16);
}

/* ===============================
   PREMIUM CENTER DRAWER (V3)
================================ */

/* Overlay biraz daha soft */
.overlay{
  position:fixed;
  inset:0;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:150;
}

.overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* Drawer merkez modal */
.drawer{
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92%, 420px);
  max-height: 85vh;
  background: #fbf7ef;
  border: 1px solid #e5dfd4;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.98);
  opacity: 0;
  pointer-events: none; /* 🔥 ÖNEMLİ */
  transition: all .25s ease;
  z-index: 200;
}

/* Açık durum */
.drawer.show{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto; /* 🔥 SADECE AÇIKKEN TIKLANABİLİR */
}

/* İç scroll alan */
.drawer-body{
  padding: 18px;
  overflow-y: auto;
}

/* Header */
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid #eee6da;
}

.drawer-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  font-size:17px;
}

/* CTA */
.menu-play-btn{
  display:block;
  text-align:center;
  margin-bottom:18px;
  padding:14px 18px;
  border-radius:18px;
  font-weight:900;
  text-decoration:none;
  background: linear-gradient(135deg,#20b46a,#10a85f);
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  transition:.2s ease;
}

.menu-play-btn:hover{
  transform: translateY(-2px);
}

/* Menü liste */
.menu-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:transparent;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}

.menu-item:hover{
  background:#f1ece3;
  transform: translateX(2px);
}

.arrow{
  font-weight:900;
  opacity:.6;
}

/* Accordion */
.accordion-toggle{
  background:none;
  border:none;
}

.chevron{
  transition: transform .25s ease;
  font-size:14px;
}

.accordion-toggle.active .chevron{
  transform: rotate(180deg);
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 4px;
  transition: max-height .3s ease, opacity .2s ease;
  opacity:0;
}

.accordion-content a{
  text-decoration:none;
  font-size:13px;
  padding:6px 4px;
  border-radius:8px;
  background:#f7f3ea;
  text-align:center;
}

.accordion-content.show{
  max-height:400px;
  margin-top:10px;
  opacity:1;
}

/* Hesap alanı */
.menu-account{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid #eee6da;
}

/* Full width signin */
.signin-btn.full{
  width:100%;
  margin-top:4px;
}

/* Logout */
.logout-btn{
  background:none;
  border:none;
  text-align:left;
  width:100%;
}

.menu-user-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  margin-bottom:10px;
  border-radius:16px;
  background:#f4efe6;
}

.menu-user-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.menu-user-name{
  font-weight:900;
  font-size:14px;
}


.menu-user-card-advanced{
  background:#f4efe6;
  padding:16px;
  border-radius:18px;
  margin-bottom:14px;
}

.menu-user-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.menu-user-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
}

.menu-user-name{
  font-weight:1000;
  font-size:15px;
}

.menu-user-badge{
  font-size:12px;
  color:var(--muted);
}

.menu-user-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  text-align:center;
}

.stat-num{
  font-weight:1000;
  font-size:16px;
}

.stat-label-mini{
  font-size:11px;
  color:var(--muted);
}


/* ===== SCORE LIST CLEAN (NO TOP3) ===== */

.table{
  width:100%;
  border-collapse:collapse;
}

.table thead{
  display:none;
}

.table tbody tr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:transparent;
}

.table tbody tr:last-child{
  border-bottom:none;
}

/* Rank */
.table tbody td:first-child{
  width:34px;
  flex:0 0 34px;
  font-weight:900;
  font-size:14px;
  opacity:.65;
}

/* İlk 3 rozet güçlü görünsün */
.table tbody tr:nth-child(1) td:first-child,
.table tbody tr:nth-child(2) td:first-child,
.table tbody tr:nth-child(3) td:first-child{
  opacity:1;
  font-size:16px;
}

/* Nick */
.table tbody td:nth-child(2){
  flex:1 1 auto;
  min-width:0;
  font-weight:1000;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Score */
.table tbody td:last-child{
  flex:0 0 auto;
  text-align:right;
}



/* Desktop hover only */
@media (hover:hover) and (pointer:fine){
  .table tbody tr:hover{
    background:rgba(0,0,0,.03);
  }
}

/* Mobile */
@media (max-width:640px){
  .table tbody tr{
    padding:11px 0;
    gap:10px;
  }

  .table tbody td:nth-child(2){
    font-size:15px;
  }

  .pill{
    font-size:12.5px;
    padding:7px 11px;
  }
}

/* ==== CATEGORY HORIZONTAL SCROLL (sadece kategori sayfası) ==== */

.category-scroll{
  margin-top:20px;
}

.category-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;

}

.category-row::-webkit-scrollbar{
  display:none;
}

.category-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  white-space:nowrap;
  padding:10px 16px;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-weight:600;
  color:#222;
  text-decoration:none;
}

.category-chip:hover{
  transform:translateY(-2px);
}



@media (min-width: 992px){

  .category-scroll{
    max-width: 900px;   /* daha kompakt */
    margin: 25px auto 10px;
  }

  .category-row{
    display:grid;
    grid-template-columns: repeat(3, 1fr);  /* 👈 MAX 3 */
    gap:18px;
    overflow:visible;
  }

  .category-chip{
    text-align:center;
    padding:16px 20px;
    border-radius:18px;
  }

}


.contact-wrap {
  max-width: 700px;
  margin: 40px auto;
}

.contact-form {
  background: var(--card);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
}

.btn-primary {
  background: var(--green);
  color: #fff;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: .2s ease;
}

.btn-primary:hover {
  background: var(--green2);
}

.form-msg {
  margin-top: 15px;
  font-size: 14px;
}

.hp-field {
  display: none;
}

/* ===== PROFILE PAGE (PREMIUM v2 CLEAN) ===== */


/* HEADER */
.profile-header{
  position:relative;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  align-items:center;
  padding:20px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
  transition:.3s ease;
}

.profile-header:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

/* soft ambient light */
.profile-header::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto -80px;
  height:200px;
  background:radial-gradient(closest-side,rgba(0,0,0,.05),transparent);
  pointer-events:none;
}

.profile-avatar-wrap{
  width:96px;
  height:96px;
  border-radius:24px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
  overflow:visible; /* kritik */
}

/* ===============================
   PREMIUM RANK GRADIENT FRAME
================================ */


/* Gradient katman */
.profile-avatar-wrap::before{
  content:"";
  position:absolute;
  inset:-3px; /* dışa doğru ring */
  border-radius:27px; /* 24 + 3 */
  background: var(--rank-gradient, transparent);
  z-index:0;
}

/* İç görsel */
.profile-avatar-wrap img{
  width:100%;
  height:100%;
  border-radius:24px;
  object-fit:cover;
  position:relative;
  z-index:1;
}

/* Hover hafif premium parıltı */
.profile-avatar-wrap:hover::before{
  filter:brightness(1.1);
}


.profile-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* MAIN */
.profile-main{
  min-width:0;
}

.profile-name{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:1000;
  font-size:22px;
  letter-spacing:-.3px;
  line-height:1.1;
}

/* INLINE TITLE */
.profile-title-inline{
  font-size:14px;
  font-weight:900;
  letter-spacing:.3px;
  white-space:nowrap;
  transition:.3s ease;
}

@keyframes rankSweep{
  0%   { transform:translateX(-120%); opacity:0; }
  10%  { opacity:.7; }
  50%  { transform:translateX(120%); opacity:.4; }
  100% { transform:translateX(120%); opacity:0; }
}

/* ===============================
   LIGHT SWEEP LAYER
================================ */

.profile-avatar-wrap::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:27px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 70%
  );
  transform:translateX(-120%);
}
/* ===============================
   RANK COLOR SYSTEM
================================ */

/* 1 — Çaylak */
.rank-caylak{
  --rank-gradient: linear-gradient(135deg,#cfcfcf,#9e9e9e);
  color:#777;
}

/* 2 — Kaşif */
.rank-kasif{
  --rank-gradient: linear-gradient(135deg,#78d6ff,#4aa8d8);
  color:#2d7ca6;
}

/* 3 — Usta */
.rank-usta{
  --rank-gradient: linear-gradient(135deg,#ffb347,#ff7a00);
  color:#d96a00;
}

/* 4 — Elit */
.rank-elit{
  --rank-gradient: linear-gradient(135deg,#b388ff,#7b3fe4);
  color:#6a33c4;
}

/* 5 — Efsane */
.rank-efsane{
  --rank-gradient: linear-gradient(135deg,#ffd66e,#d4af37,#f7e27b);
  color:#b9901c;
}

.rank-efsane.profile-avatar-wrap::after{
  animation:rankSweep 8s linear infinite;
}

/* 6 — Mitos */
.rank-mitos{
  --rank-gradient: linear-gradient(135deg,#ff8aa5,#c9a6ff,#78d6ff);
  color:#a93d7a;
}

.rank-mitos.profile-avatar-wrap::after{
  animation:rankSweep 6s linear infinite;
}

.rank-mitos.profile-avatar-wrap{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4),
    0 0 18px rgba(200,120,255,.35),
    0 10px 25px rgba(0,0,0,.15);
}

/* BADGE */
.profile-badge{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(4px);
}

/* RANK CHIPS */
.profile-ranks{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.rank-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  font-weight:900;
  font-size:13px;
  transition:.2s ease;
}

.rank-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* STATS */
.profile-stats{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.stat-card{
  background:#fff;
  border-radius:20px;
  padding:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:.25s ease;
}

.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

.stat-number{
  font-size:26px;
  font-weight:1000;
}

.stat-label{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

/* HISTORY */
.profile-history{
  margin-top:16px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.profile-history h2{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:1000;
}

.history-item{
  padding:12px 0;
  border-top:1px solid rgba(0,0,0,.06);
}



/* MOBILE */
@media (max-width:720px){

  .profile-header{
    grid-template-columns:86px 1fr;
    padding:16px;
  }

  .profile-avatar-wrap{
    width:78px;
    height:78px;
  }

  .profile-name{
    font-size:18px;
  }

  .profile-stats{
    grid-template-columns:1fr;
  }
}





/* ===== ACCOUNT: AVATAR PICKER (FIX) ===== */

.avatar-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap:12px;
  margin-top:12px;
}

.avatar-option{
  display:grid;
  place-items:center;
  cursor:pointer;
}

.avatar-option input{
  display:none;
}

.avatar-option img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:18px;
  border:2px solid transparent;
  box-shadow: var(--shadow-soft);
  display:block;
}

.avatar-option input:checked + img{
  border-color: var(--green);
}


/* ===== RESULT MODAL PREMIUM ===== */

.result-modal{
  max-width:480px;
}

.result-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
  position:relative;
}

.result-header h2{
  font-size:22px;
  font-weight:1000;
  line-height:1.3;
}

#resultClose{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.result-word{
  font-size:34px;
  font-weight:1000;
  text-align:center;
  margin-bottom:12px;
  letter-spacing:3px;
}

.result-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
  box-shadow: var(--shadow-soft);
}

.result-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  font-size:14px;
  color:var(--muted);
}

.result-score{
  background:#fff;
  border:2px solid var(--border);
  border-radius:999px;
  padding:6px 14px;
  font-weight:1000;
  color:var(--ink);
}

.result-actions{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.result-secondary{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.result-cta{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.08);
  text-align:center;
}

.result-subtext{
  text-align:center;
  font-size:16px;
  color:var(--ink);
  margin:10px 0 20px;
  font-weight:700;
}


/* ==========================================
   GAME PAGE – FINAL CLEAN MOBILE STRUCTURE
========================================== */

/* Inline margin ihtimali */
#viewGame{
  margin-top:0;
}

/* ===================================
   HUB – OVERLAP SAFE VERSION
=================================== */

.hub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  

  background:#f8f5ee;
  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;

  padding:8px 14px;
  gap:8px; /* 🔥 boşluk kontrolü */
}

/* SOL BLOK */
.hub-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;   /* taşmayı engeller */
}

/* İKON */
.hub-icon{
  width:20px;
  height:20px;
  flex-shrink:0; /* 🔥 küçülmez */
}

/* SAĞ BLOK */
.hub-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0; /* 🔥 sabit */
}

/* BUTTON */
.hub-icon-btn{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;

  box-shadow:0 4px 10px rgba(0,0,0,.05);
  cursor:pointer;
}

/* CHIP */
.hub-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:5px 10px;
  border-radius:999px;

  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);

  font-weight:900;
  font-size:14px;

  white-space:nowrap;

  /* taşma kontrolü */
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ==========================================
   MOBILE GAME – TRUE FULL WIDTH MODE
========================================== */

@media (max-width:768px){

  /* Container */
  #app[data-page="game"] .container{
    padding:0 12px 20px;
  }

  /* Kart mobilde devre dışı */
  #app[data-page="game"] .card{
    border:none;
    box-shadow:none;
    background:transparent;
    padding:0;
    border-radius:0;
  }

  /* Hub */
  #app[data-page="game"] .hub{
    padding:6px 10px;
    margin-top:6px;
    margin-bottom:12px;
  }

  .hub-icon{
    width:20px;
    height:20px;
  }

  .hub-icon-btn{
    width:36px;
    height:36px;
  }
}


.game-meta{
  margin:6px 0 14px;
  text-align:left;      /* sola sabit */
  
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;

  color:#9a8f7a;
}

.game-meta strong{
  color:#ff8aa5;
  font-weight:1000;
}








/* ===============================
   HINT SYSTEM – PREMIUM CLEAN
================================ */

/* Satır */
.hint-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 6px;
}

/* İpucu metin alanı */
.hint{
  flex:1;
  min-height:40px;

  display:flex;
  align-items:center;

  padding:8px 14px;

  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;

  font-size:14px;
  font-weight:700;
  color:#6b6b6b;

  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

/* Ampul buton */
.hint-btn{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);

  background:#fff;

  box-shadow:0 6px 16px rgba(0,0,0,.05);

  cursor:pointer;
  transition:.15s ease;
}


.hint-btn img{
  width:30px;
  height:30px;
  display:block;
}



/* Hover sadece desktop */
@media (hover:hover){
  .hint-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }
}

/* Basılı efekt */
.hint-btn:active{
  transform:scale(.96);
}

/* Kullanıldıktan sonra */
.hint-btn.used{
  opacity:.45;
  pointer-events:none;
  box-shadow:none;
}


.auth-hidden{
  visibility:hidden;
}



/* BIO CARD */

.bio-card{

position:relative;

border-left:3px solid #20b46a;

/* masaüstü için hafif efekt */
background:
linear-gradient(
90deg,
rgba(32,180,106,.06),
rgba(32,180,106,.03) 80px,
transparent 160px
);

}

/* başlık */

.bio-card strong{

display:block;
font-size:14px;
font-weight:800;

color:#333;

}

/* bio text */

.bio-card div{

line-height:1.6;
font-size:14px;

color:#444;

}

/* mobil güçlendirme */

@media (max-width:768px){

.bio-card{

background:
linear-gradient(
90deg,
rgba(32,180,106,.12),
rgba(32,180,106,.05) 80px,
transparent 160px
);

}

}

.bio-title{
display:flex;
align-items:center;
gap:6px;
}

.bio-icon{
width:24px;
height:24px;
opacity:.8;
}

.bio-text{
line-height:1.6;
}


/* SEO CARD */

.seo-card{

position:relative;

border-left:3px solid #3b82f6;

/* masaüstü için hafif efekt */
background:
linear-gradient(
90deg,
rgba(59,130,246,.06),
rgba(59,130,246,.03) 80px,
transparent 160px
);

}

/* başlık */

.seo-card strong{

display:block;
font-size:14px;
font-weight:800;

color:#333;

}

/* seo text */

.seo-text{

line-height:1.6;

color:#444;

}

/* mobil güçlendirme */

@media (max-width:768px){

.seo-card{

background:
linear-gradient(
90deg,
rgba(59,130,246,.12),
rgba(59,130,246,.05) 80px,
transparent 160px
);

}

}

.seo-title{
display:flex;
align-items:center;
gap:6px;
}

.seo-icon{
width:24px;
height:24px;
opacity:.8;
}


/* ==============================
   CHAMPIONS PREMIUM
============================== */

.champions{
margin-top:40px;
text-align:center;
padding:28px 24px;
}

.champions-title{
font-size:28px;
font-weight:900;
margin-bottom:26px;
}

.champions-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:900px;
margin:0 auto;
}

.champion-card{
background:#ffffff;
border-radius:20px;
padding:22px 18px;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 12px 30px rgba(0,0,0,.06);
transition:all .18s ease;
}

.champion-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 36px rgba(0,0,0,.08);
}

.champion-label{
font-size:13px;
font-weight:900;
color:#777;
margin-bottom:6px;
}

.champion-name{
font-size:22px;
font-weight:1000;
margin-top:2px;
}

.champion-score{
font-size:14px;
color:#555;
margin-top:6px;
}

.champions-link{
margin-top:26px;
}

.champions-link .btn{
padding:12px 26px;
font-weight:900;
}


/* MOBILE */

@media (max-width:768px){

.champions{
padding:24px 18px;
}

.champions-grid{
grid-template-columns:1fr;
gap:14px;
}

}


/* ==============================
   CATEGORY GRID PREMIUM
============================== */

.category-section{
margin-top:50px;
text-align:center;
}

.category-section h2{
font-size:30px;
font-weight:1000;
margin-bottom:30px;
}

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:18px;
max-width:1000px;
margin:0 auto;
}

.category-grid a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding:24px 14px;
background:#ffffff;
border-radius:20px;
border:1px solid rgba(0,0,0,.08);
text-decoration:none;
font-weight:900;
font-size:16px;
color:#222;
transition:all .18s ease;
}

.category-grid a:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.category-grid img{
width:38px;
height:38px;
}

.category-grid span{
font-size:16px;
}


/* MOBILE */

@media (max-width:768px){

.category-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

}


/* ==============================
   LIVE ACTIVITY
============================== */

.live-activity{
margin-top:32px;
}

.live-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}

.live-title{
font-size:24px;
font-weight:1000;
}

.live-meta{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:700;
color:#ff3b30;
}

/* LIVE DOT */

.live-dot{
width:8px;
height:8px;
background:#ff3b30;
border-radius:50%;
display:inline-block;
animation:livePulse 1.2s infinite;
}

@keyframes livePulse{
0%{opacity:.3}
50%{opacity:1}
100%{opacity:.3}
}

/* LIST */

.live-list{
display:flex;
flex-direction:column;
gap:10px;
}

/* ITEM */

.live-item{
display:flex;
align-items:center;
gap:12px;

background:#fff;
padding:12px 14px;

border-radius:16px;
border:1px solid rgba(0,0,0,.08);

box-shadow:0 8px 22px rgba(0,0,0,.05);

transition:all .25s ease;
}

/* AVATAR */

.live-avatar{
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
}

/* CONTENT */

.live-main{
flex:1;
min-width:0;
}

.live-line{
display:flex;
align-items:center;
justify-content:space-between;
}

.live-user{
font-weight:900;
font-size:15px;
}

.live-badges{
display:flex;
gap:6px;
}

/* BADGES */

.live-pill{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
}

.live-pill-score{
background:#e7ffef;
color:#1c9d57;
}

.live-pill-record{
background:#ffe7e7;
color:#d43f3f;
}

/* SUB */

.live-sub{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:#666;
margin-top:3px;
flex-wrap:wrap;
}

.live-word{
font-weight:800;
color:#333;
}

.live-sep{
opacity:.4;
}

.live-cat{
display:flex;
align-items:center;
gap:4px;
}

.live-cat-icon{
width:14px;
height:14px;
}

.live-time{
opacity:.7;
}

/* EMPTY */

.live-empty{
padding:20px;
text-align:center;
font-weight:700;
color:#777;
}

/* ACTIONS */

.live-actions{
margin-top:18px;
text-align:center;
}

/* ==============================
   LIVE ACTIVITY ANIMATION
============================== */

/* yeni event animasyonu */

.live-item.new{
animation:livePop .45s ease;
}

@keyframes livePop{

0%{
opacity:0;
transform:translateY(-16px) scale(.96);
}

60%{
transform:translateY(3px) scale(1.02);
}

100%{
opacity:1;
transform:translateY(0) scale(1);
}

}

/* skor glow */

.live-pill-score{
position:relative;
}

.live-pill-score.new{
animation:scoreGlow 1s ease;
}

@keyframes scoreGlow{

0%{
box-shadow:0 0 0 rgba(255,160,0,0);
}

50%{
box-shadow:0 0 12px rgba(255,160,0,.7);
}

100%{
box-shadow:0 0 0 rgba(255,160,0,0);
}

}

/* avatar bounce */

.live-avatar.new{
animation:avatarBounce .45s ease;
}

@keyframes avatarBounce{

0%{
transform:scale(.7);
}

70%{
transform:scale(1.1);
}

100%{
transform:scale(1);
}

}

/* ==============================
   MOBILE
============================== */

@media (max-width:768px){

.live-avatar{
width:36px;
height:36px;
}

.live-user{
font-size:14px;
}

.live-pill{
font-size:11px;
padding:3px 8px;
}

.live-sub{
font-size:12px;
}

}

a{
text-decoration:none;
color:inherit;
transition:opacity .15s ease;
}

a:hover{
opacity:.7;
}



/* POPULAR CATEGORIES */

.popular-categories{
margin-top:28px;
}

.popular-title{
font-size:20px;
font-weight:900;
margin-bottom:16px;
}

.popular-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}

.popular-item{
display:flex;
align-items:center;
gap:8px;

padding:10px 12px;

border-radius:12px;
border:1px solid rgba(0,0,0,.08);

background:#fff;

font-weight:700;
font-size:14px;

text-decoration:none;
color:#333;

transition:.2s;
}

.popular-item:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.popular-item img{
width:22px;
height:22px;
}