/* ==========================================================================
   BelliOlur — Tema (sitepazari.web.app tema dili temel alınmıştır)
   Kabuk, tipografi, kartlar, header/footer, arama modalı.
   ========================================================================== */

:root {
  --primary-color: #00bcd4;
  --primary-dark: #0097a7;
  --secondary-color: #009688;
  --accent-color: #ff4081;
  --dark-color: #263238;
  --light-color: #eceff1;
  --text-color: #37474f;
  --muted-color: #78909c;
  --line-color: #e3e9ec;
  --surface: #ffffff;
  --surface-soft: #f7fafb;
  --success: #2e7d32;
  --warn: #ef6c00;
  --danger: #d32f2f;
  --info: #0277bd;

  --border-radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --box-shadow: 0 6px 15px rgba(0, 0, 0, .10);
  --box-shadow-hover: 0 12px 28px rgba(0, 0, 0, .16);
  --shadow-soft: 0 2px 8px rgba(38, 50, 56, .06);
  --transition: all .28s cubic-bezier(.25, .8, .25, 1);
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: #fafafa;
  background-image: linear-gradient(135deg, rgba(0, 188, 212, .05) 0%, rgba(0, 150, 136, .05) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--primary-color); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid rgba(0, 188, 212, .55); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; width: 100%; padding: 0 20px; }

/* ------------------------------------------------------------------ header */

.main-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, .08);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 1000;
}
.header-container { display: flex; align-items: center; gap: 20px; }

.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* İşaret artık /images/logo.svg dosyasından geliyor (bkz. build-logo-assets).
   Zemin logonun kendi içinde olduğu için burada arka plan verilmez; şeffaf
   bir logo konulursa da doğru görünür. */
.logo-mark {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  object-fit: contain; display: block;
  box-shadow: 0 4px 12px rgba(0, 188, 212, .28);
}
.logo-text {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.5px;
  display: inline-flex; align-items: center;
}
.logo-text .logo-belli {
  color: #0097A7;
}
.logo-text .logo-olur {
  color: #FF176B;
}

.main-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; flex-shrink: 0; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 0; background: transparent; border-radius: 22px;
  font-size: .95rem; font-weight: 500; cursor: pointer; transition: var(--transition);
}
.nav-btn:hover { background: var(--light-color); color: var(--primary-dark); }
.nav-btn i { font-size: .75rem; transition: transform .25s ease; }
.nav-dropdown { position: relative; }
.nav-dropdown.open > .nav-btn i { transform: rotate(180deg); }
.mega-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 1200;
  width: min(88vw, calc(var(--sutun, 3) * 300px + 40px));
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow-hover); padding: 16px; display: none;
  max-height: min(76vh, 640px); overflow-y: auto;
  animation: mega-in .18s ease;
}
.nav-dropdown.open .mega-panel { display: block; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }

.mega-grid { display: grid; grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr)); gap: 4px; }
.mega-kart {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 11px;
  border-radius: var(--radius-sm); transition: background .16s, transform .16s;
}
.mega-kart:hover { background: color-mix(in srgb, var(--c, #00bcd4) 9%, #fff); transform: translateX(2px); }
.mega-ikon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, #00bcd4) 15%, #fff); color: var(--c, var(--primary-color)); font-size: .92rem;
}
.mega-metin { min-width: 0; }
.mega-metin strong { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--dark-color); line-height: 1.3; }
.mega-metin strong small {
  font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 9px;
  background: color-mix(in srgb, var(--c, #00bcd4) 14%, #fff); color: var(--c, var(--primary-color));
}
.mega-metin > small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .76rem; color: var(--muted-color); line-height: 1.35; margin-top: 2px;
}

.mega-alt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-color); }
.mega-alt-link-bar { margin-bottom: 10px; }
.mega-rehber-link {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: #fef3c7; border: 1px solid #fed7aa; border-radius: var(--radius-sm);
  color: #92400e; font-size: .84rem; transition: var(--transition);
}
.mega-rehber-link:hover { background: #fde68a; color: #78350f; transform: translateY(-1px); }
.mega-rehber-link i { color: #d97706; font-size: .95rem; }
.mega-rehber-link small { margin-left: auto; background: #f59e0b; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: .72rem; }
.mega-alt-baslik { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-color); margin-bottom: 9px; }
.mega-alt-baslik i { color: var(--accent-color); }
.mega-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.mega-etiket {
  padding: 5px 12px; border-radius: 16px; background: var(--surface-soft);
  font-size: .78rem; color: var(--text-color); transition: var(--transition);
}
.mega-etiket:hover { background: var(--primary-color); color: #fff; }

@media (max-width: 1040px) { .nav-rehber span, .nav-rehber { font-size: 0; } .nav-rehber i { font-size: .95rem; } }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

.mobile-nav { display: none; }

/* ------------------------------------------------------------------ butonlar */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; background: var(--primary-color); color: #fff; border: none;
  border-radius: 25px; font-size: .95rem; font-weight: 500; cursor: pointer;
  transition: var(--transition); box-shadow: 0 4px 10px rgba(0, 188, 212, .28);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 188, 212, .38); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary-color); }
.btn-secondary { background: var(--secondary-color); box-shadow: 0 4px 10px rgba(0, 150, 136, .28); }
.btn-accent { background: var(--accent-color); box-shadow: 0 4px 10px rgba(255, 64, 129, .28); }
.btn-outline {
  background: transparent; border: 2px solid var(--primary-color);
  color: var(--primary-color); box-shadow: none;
}
.btn-outline:hover { background: var(--primary-color); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-icon {
  padding: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--light-color); color: var(--dark-color); box-shadow: none;
}
.btn-icon:hover { background: var(--primary-color); color: #fff; }
.icon-btn {
  background: transparent; border: 0; cursor: pointer; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: var(--muted-color);
  transition: var(--transition);
}
.icon-btn:hover { background: var(--light-color); color: var(--danger); }

/* -------------------------------------------------------------------- yerleşim */

.ad-container { display: flex; justify-content: center; margin: 18px auto; }
.ad-text {
  padding: 10px 22px; background: var(--light-color); color: var(--secondary-color);
  border: 1px dashed #cfd8dc; border-radius: 25px; font-size: .82rem; font-weight: 500;
}

.main-container {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--box-shadow);
  margin: 20px auto;
  /* YATAY BOŞLUK BAŞLIK/ALTBİLGİ İLE AYNI OLMALI.
     Burası `padding: 30px` idi; `.container` ise yatayda 20px kullanıyor.
     Sonuçta üç yatay bant iki farklı hizada duruyordu: logo ve altbilgi
     bağlantıları 72'de başlarken içerik kartları 82'de başlıyor, sağda da
     aynı 10px'lik kayma oluşuyordu. Göz logoyla kart kenarını karşılaştırdığı
     için bu fark "yamuk" görünüyordu. Dikey 30px korunuyor. */
  padding: 30px 20px;
}

.content-area { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.content-area.tek-sutun { grid-template-columns: minmax(0, 1fr); }
.right-content[hidden] { display: none; }
.content-area > * { min-width: 0; }
.left-content-area { min-width: 0; }
.right-content {
  background: var(--surface-soft); border-radius: var(--border-radius); padding: 18px;
  position: sticky; top: 90px;
}

.section-heading { margin-bottom: 18px; }
.section-heading h2 {
  font-size: 1.2rem; color: var(--dark-color); padding-bottom: 8px;
  position: relative; display: inline-block;
}
.section-heading h2::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 46px; height: 3px;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-radius: 2px;
}

.discover-container { display: grid; gap: 10px; margin-bottom: 14px; }
.discover-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
  text-decoration: none; transition: var(--transition);
  border-left: 3px solid var(--c, var(--primary-color));
}
.discover-card:hover { transform: translateX(4px); box-shadow: var(--box-shadow); }
.discover-card > i { color: var(--c, var(--primary-color)); margin-top: 4px; width: 18px; text-align: center; flex-shrink: 0; }
.discover-card strong { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .9rem; color: var(--dark-color); line-height: 1.3; }
.discover-card small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .76rem; color: var(--muted-color); line-height: 1.35;
}

.discover-cat-badge {
  display: inline-flex; align-items: center; gap: 4.5px;
  padding: 2.5px 7px; border-radius: 6px; font-size: .68rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0; letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discover-card:hover .discover-cat-badge {
  transform: translateY(-1px);
}

.search-tag-kardes {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.nav-kardes-logo {
  flex-shrink: 0; display: inline-block; vertical-align: middle;
}

/* BelliOlur Header'ında BelliOlmaz Oyun butonu */
.main-header .nav-oyun-btn {
  background: rgba(255, 23, 107, 0.06) !important;
  border: 1px solid rgba(255, 23, 107, 0.22) !important;
  border-radius: 9999px !important;
  padding: 4px 11px !important;
  font-size: 12px !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.main-header .nav-oyun-btn:hover {
  background: rgba(255, 23, 107, 0.12) !important;
  border-color: rgba(255, 23, 107, 0.4) !important;
  transform: translateY(-1px);
}

/* Rastgele keşfette eğlence kartları */
.discover-card-eglence {
  background: linear-gradient(90deg, rgba(255, 23, 107, 0.04), #fff);
  border-left: 3px solid var(--c, #FF176B);
}
.discover-card-eglence:hover {
  background: linear-gradient(90deg, rgba(255, 23, 107, 0.08), #fff);
}
.discover-card-eglence > i {
  color: var(--c, #FF176B);
}

.discover-card-alet {
  background: linear-gradient(90deg, rgba(0, 151, 167, 0.04), #fff);
  border-left: 3px solid var(--c, #0097A7);
}
.discover-card-alet:hover {
  background: linear-gradient(90deg, rgba(0, 151, 167, 0.08), #fff);
}
.discover-card-alet > i {
  color: var(--c, #0097A7);
}

/* ---------------------------------------------------------------------- hero */

.hero {
  text-align: center; padding: 34px 20px 30px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(0, 188, 212, .09), rgba(255, 64, 129, .07));
  border-radius: var(--radius-lg);
}
.hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.25; color: var(--dark-color); }
.hero h1 span, .brand-vurgu {
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}
.hero > p { color: var(--muted-color); margin: 12px auto 22px; max-width: 620px; }
.hero-search { position: relative; max-width: 560px; margin: 0 auto; display: flex; align-items: center; }
.hero-search input {
  width: 100%; padding: 15px 54px 15px 22px; border: 1px solid var(--line-color);
  border-radius: 30px; font: inherit; font-size: 1rem; background: #fff;
  box-shadow: var(--shadow-soft); transition: var(--transition);
}
.hero-search input:focus {
  outline: none; border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 188, 212, .16);
}
.hero-search-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--primary-color); color: #fff; display: grid; place-items: center;
  font-size: .95rem; cursor: pointer; transition: var(--transition);
}
.hero-search-btn:hover { background: var(--primary-dark); transform: translateY(-50%) scale(1.06); }

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.tag {
  padding: 6px 14px; background: #fff; border-radius: 20px; font-size: .82rem;
  color: var(--secondary-color); box-shadow: var(--shadow-soft); transition: var(--transition);
}
.tag:hover { background: var(--primary-color); color: #fff; transform: translateY(-2px); }

/* Kategori rengini taşıyan çip.
   `inline-flex` + `align-items:center` ikonu yazıyla aynı hizada tutuyor;
   yükseklik değişmesin diye dolgu ve yazı boyutu `.tag` ile aynı bırakıldı,
   ikon `1em` ile yazıya bağlandı.
   Arka plan tam doygun renk DEĞİL: altı çip yan yana tam renk olunca başlık
   alanı okunmaz hâle geliyordu. Yumuşak tonda zemin + tam renkte ikon ve
   çerçeve, kategoriyi yazıyı okumadan belli ediyor. */
.tag-renkli {
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  color: color-mix(in srgb, var(--c) 70%, #1f2937);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
.tag-renkli i { font-size: 1em; line-height: 1; color: var(--c); flex: none; }
/* Adında "Hesaplama" geçmeyen birkaç uzun araç ("Kredi Notu ve Azami Kredi
   Kartı/Kredi Limiti") çipi satırın yarısına çıkarıyordu. Tam ad `title`
   içinde duruyor, burada yalnızca görsel sınır var. */
.tag-renkli .tag-ad {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px;
}
.tag-renkli:hover { background: var(--c); color: #fff; }
.tag-renkli:hover i { color: #fff; }

/* `color-mix` desteklemeyen tarayıcıda çipler okunabilir kalsın:
   zemin beyaz, ayrım ikon renginden gelir. */
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .tag-renkli { background: #fff; color: var(--secondary-color); }
}

/* -------------------------------------------------------- kılavuz banner'ları */

.home-guide-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #fff 0%, #fdf8f0 100%);
  border: 1px solid #fed7aa; border-radius: var(--radius-lg);
  padding: 16px 22px; margin: 24px 0 16px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .09);
  transition: var(--transition);
}
.home-guide-banner:hover { box-shadow: 0 8px 22px rgba(245, 158, 11, .16); transform: translateY(-1px); }
.home-guide-content { display: flex; align-items: center; gap: 16px; min-width: 0; }
.home-guide-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #fef3c7; color: #d97706; display: grid; place-items: center; font-size: 1.25rem;
}
.home-guide-text strong { font-size: 1.02rem; color: var(--dark-color); display: block; }
.home-guide-text p { font-size: .86rem; color: var(--muted-color); margin-top: 2px; line-height: 1.4; }
.home-guide-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 18px; border-radius: 20px; font-size: .88rem; font-weight: 600;
  background: #f59e0b; color: #fff; transition: var(--transition);
}
.home-guide-btn:hover { background: #d97706; color: #fff; transform: translateX(2px); }
@media (max-width: 640px) {
  .home-guide-banner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .home-guide-btn { width: 100%; justify-content: center; }
}

.category-guide-box {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: color-mix(in srgb, var(--c, #00bcd4) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, #00bcd4) 22%, #fff);
  border-radius: var(--radius-sm); padding: 12px 18px; margin: 12px 0 16px;
  transition: var(--transition);
}
.category-guide-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.category-guide-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--c, #00bcd4) 18%, #fff);
  color: var(--c, var(--primary-color)); display: grid; place-items: center; font-size: 1rem;
}
.category-guide-text strong { font-size: .94rem; color: var(--dark-color); display: block; }
.category-guide-text p { font-size: .82rem; color: var(--muted-color); margin-top: 1px; }
.category-guide-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 14px; border-radius: 16px; font-size: .82rem; font-weight: 600;
  background: #fff; color: var(--c, var(--primary-color));
  border: 1px solid color-mix(in srgb, var(--c, #00bcd4) 30%, #fff);
  transition: var(--transition);
}
.category-guide-btn:hover {
  background: var(--c, var(--primary-color)); color: #fff;
}
@media (max-width: 640px) {
  .category-guide-box { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .category-guide-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------- başlık */

.page-header { margin: 30px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-color); }
.page-header h1 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--dark-color); display: flex; align-items: center; gap: 12px; }
.page-header h2 { font-size: 1.35rem; color: var(--dark-color); }
.page-header p { color: var(--muted-color); font-size: .93rem; margin-top: 6px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--muted-color); margin-bottom: 6px;
}
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb i { font-size: .65rem; }

.filter-bar { margin: 14px 0 4px; position: relative; max-width: 420px; display: flex; align-items: center; }
.filter-bar input {
  width: 100%; padding: 11px 44px 11px 16px; border: 1px solid var(--line-color);
  border-radius: 24px; font: inherit; background: #fff; transition: var(--transition);
}
.filter-bar input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 188, 212, .15); }
.filter-search-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--surface-soft); color: var(--muted-color); display: grid; place-items: center;
  font-size: .82rem; cursor: pointer; transition: var(--transition);
}
.filter-search-btn:hover { background: var(--primary-color); color: #fff; }

.empty-state { text-align: center; color: var(--muted-color); padding: 40px 0; }

/* --------------------------------------------------------------------- kart */

.categories-container {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px; margin: 18px 0;
}
.category-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 24px 18px; min-height: 175px;
  background: #fff; border: 1px solid var(--line-color); border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft); transition: var(--transition); overflow: hidden;
}
.category-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--c, var(--primary-color)), var(--accent-color));
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--box-shadow-hover); border-color: transparent; }
.category-icon {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 12px; font-size: 21px;
  background: color-mix(in srgb, var(--c, #00bcd4) 15%, #fff);
  color: var(--c, var(--primary-color));
}
.category-card h3 { font-size: 1.05rem; color: var(--dark-color); margin-bottom: 5px; }
.category-card p { font-size: .8rem; color: var(--muted-color); line-height: 1.4; }
.category-count {
  margin-top: 10px; font-size: .72rem; font-weight: 600; color: var(--c, var(--primary-color));
  background: color-mix(in srgb, var(--c, #00bcd4) 12%, #fff);
  padding: 3px 12px; border-radius: 12px;
}

.tools-container {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 16px; margin: 18px 0;
}
.tool-card {
  position: relative; display: flex; flex-direction: column; min-height: 138px;
  background: #fff; border: 1px solid var(--line-color); border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft); transition: var(--transition); overflow: hidden;
}
.tool-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  opacity: 0; transition: opacity .25s;
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-hover); }
.tool-card:hover::before { opacity: 1; }
.tool-header { display: flex; align-items: center; gap: 11px; padding: 16px 16px 6px; }
.tool-icon {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  flex-shrink: 0; font-size: 16px;
  background: color-mix(in srgb, var(--c, #00bcd4) 14%, #fff);
  color: var(--c, var(--primary-color));
}
.tool-icon.lg { width: 58px; height: 58px; font-size: 24px; }
.tool-title { font-size: 1rem; font-weight: 600; color: var(--dark-color); line-height: 1.3; }
.tool-body { padding: 4px 16px 12px; flex-grow: 1; }
.tool-body p { font-size: .82rem; color: var(--muted-color); line-height: 1.45; }
.tool-cat {
  padding: 0 16px 14px; font-size: .72rem; color: var(--primary-dark); font-weight: 500;
}

/* -------------------------------------------------------------- arama modalı */

.search-modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(38, 50, 56, .55);
  backdrop-filter: blur(4px); display: none; padding: 8vh 20px 20px; overflow-y: auto;
}
.search-modal.active { display: block; }
body.modal-open { overflow: hidden; }
.search-panel {
  max-width: 620px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow-hover); overflow: hidden;
}
.search-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-color); }
.search-head > i { color: var(--muted-color); }
.search-head input { flex: 1; border: 0; font: inherit; font-size: 1.03rem; background: transparent; }
.search-head input:focus { outline: none; }
.search-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.search-hint { padding: 24px; text-align: center; color: var(--muted-color); font-size: .88rem; }
.search-item {
  display: flex; gap: 13px; align-items: center; padding: 11px 13px;
  border-radius: var(--radius-sm); transition: background .18s;
  text-decoration: none;
}
.search-item:hover { background: var(--surface-soft); }
.search-item-icon {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary-color) 12%, #fff);
  color: var(--primary-color); flex-shrink: 0; font-size: 14px;
}
.search-item-text { flex: 1; min-width: 0; }
.search-item strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .93rem; color: var(--dark-color); }
.search-item small { display: block; font-size: .78rem; color: var(--muted-color); margin-top: 2px; }

/* Eğlence araçları için ayırt edici özel tarz */
.search-item-eglence {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.04), transparent);
  border-left: 3px solid var(--c, #a855f7);
  padding-left: 10px;
}
.search-item-eglence:hover {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.12), var(--surface-soft));
}
.search-item-icon-eglence {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, #a855f7) 25%, #fff), color-mix(in srgb, #ec4899 25%, #fff));
  color: var(--c, #a855f7);
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.2);
}
.search-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.search-tag-eglence {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  box-shadow: 0 2px 4px rgba(168, 85, 247, 0.25);
}

/* ------------------------------------------------------------------- toast */

.toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 3000; display: grid; gap: 10px; }
.toast {
  background: var(--dark-color); color: #fff; padding: 12px 20px; border-radius: 24px;
  font-size: .88rem; box-shadow: var(--box-shadow-hover); animation: toast-in .28s ease;
}
.toast.out { opacity: 0; transform: translateY(8px); transition: all .45s ease; }
.toast.tone-warn { background: var(--warn); }
.toast.tone-danger { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------------- footer */

.main-footer { background: var(--dark-color); color: #b0bec5; margin-top: 40px; padding: 22px 0; }
.footer-satirlar { display: grid; gap: 10px; }
.footer-satir {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 18px; margin: 0; text-align: center;
}

.footer-marka { font-size: .9rem; }
.footer-marka .logo-mark { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.footer-marka strong { color: #fff; font-size: 1.02rem; }
.footer-marka span { color: #90a4ae; }

.footer-gelistirici { font-size: .85rem; padding: 9px 0; border-block: 1px solid rgba(255, 255, 255, .08); }
.footer-oge {
  display: inline-flex; align-items: center; gap: 7px;
  color: #cfd8dc; transition: color .2s;
}
.footer-oge i { color: var(--primary-color); font-size: .85rem; }
a.footer-oge:hover { color: var(--primary-color); }
.footer-gelistirici b { color: #fff; font-weight: 600; }

.footer-yasal { font-size: .78rem; color: #78909c; }
.footer-yasal a { color: #90a4ae; text-decoration: underline; text-underline-offset: 2px; }
.footer-yasal a:hover { color: var(--primary-color); }

@media (max-width: 620px) {
  .footer-satir { gap: 6px 12px; }
  .footer-gelistirici { font-size: .8rem; }
}

/* --------------------------------------------------------------------- 404 */

.error-page { text-align: center; padding: 60px 20px; }
.error-code {
  font-size: 5rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page h1 { font-size: 1.4rem; margin: 12px 0 8px; color: var(--dark-color); }
.error-page p { color: var(--muted-color); }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ------------------------------------------------------------------ duyarlı */

@media (max-width: 1080px) {
  .content-area { grid-template-columns: 1fr; }
  .right-content { position: static; order: 2; }
}

.js-menu { display: none !important; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .btn-rumuz { display: none !important; }
  .js-menu { display: inline-flex !important; }
  .hide-sm { display: none; }
  /* Yatay boşluk `.container` ile aynı kalmalı (20px); 16px olduğunda
     başlık ve altbilgi 20'de, içerik 16'da başlıyor ve dar ekranlarda da
     aynı kayma görünüyordu. 520px altında `.container` zaten 12px'e
     iniyor ve bu kuralı geçersiz kılıyor. */
  .main-container { padding: 20px; border-radius: 12px; }
  .mobile-nav {
    display: grid; gap: 2px; padding: 10px 20px 16px;
    border-top: 1px solid var(--line-color); margin-top: 12px;
  }
  .mobile-nav[hidden] { display: none; }
  .mobil-profil {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; margin-bottom: 6px; border-radius: 8px;
    background: rgba(0, 188, 212, .09); border: 1px solid rgba(0, 188, 212, .22);
    color: var(--dark-color); font-size: .92rem; cursor: pointer;
  }
  .mobil-profil-sol { display: inline-flex; align-items: center; gap: 8px; }
  .mobil-profil-sol i { color: var(--primary-color); font-size: 1.1rem; }
  .mobil-profil-sag { font-size: .78rem; color: var(--primary-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .mobile-nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 10px; font-size: .96rem; font-weight: 500; color: var(--dark-color);
    transition: var(--transition);
  }
  .mobile-nav a:hover { background: var(--surface-soft); color: var(--primary-color); }
  .mobile-nav a i { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; }
  .mobile-nav a small { margin-left: auto; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 12px; background: var(--surface-soft); color: var(--muted-color); }
  /* Kılavuz üst menüden kaldırılmıştı ama mobilde üç ana bölümle EŞ seviyede
     duruyordu; menü dört ana bölüm varmış gibi okunuyordu. Masaüstünde kılavuz
     "Hesaplama Araçları" panelinin içinde, ona bağlı bir bağlantı — mobilde de
     öyle görünmeli. Silmek yerine alt seviyeye alındı: footer'da da bağlantısı
     olmadığı için silmek 311 rehberi mobil menüden tamamen erişilemez yapardı. */
  .mobil-link-alt {
    margin-left: 22px; padding-top: 9px; padding-bottom: 9px;
    font-size: .88rem; font-weight: 400; color: var(--muted-color);
    border-left: 2px solid var(--line-color); border-radius: 0 10px 10px 0;
  }
  .mobil-link-alt i { font-size: .92rem; }
  .mobil-link-alt small { font-size: .72rem; }

  .mobil-araclar i { color: var(--primary-color); }
  .mobil-rehber i { color: #d97706; }
  .mobil-atolye i { color: #a855f7; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .categories-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .tools-container { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
}

@media (max-width: 520px) {
  .container { padding: 0 12px; }
  .hero { padding: 26px 14px; }
  .categories-container, .tools-container { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 150px; padding: 18px 10px; }
  .ad-container { display: none; }
}

@media print {
  .main-header, .main-footer, .right-content, .ad-container,
  .result-toolbar, .form-actions, .breadcrumb, .tools-container { display: none !important; }
  .main-container { box-shadow: none; margin: 0; padding: 0; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------- ana sayfa araç kataloğu */

.katalog { display: grid; gap: 10px; margin: 18px 0; }
.katalog-bolum { border: 1px solid var(--line-color); border-radius: var(--border-radius); overflow: hidden; background: #fff; }
.katalog-baslik {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; border: 0; background: transparent; cursor: pointer; text-align: left;
  transition: background .18s;
}
.katalog-baslik:hover { background: var(--surface-soft); }
.katalog-ikon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, #00bcd4) 14%, #fff); color: var(--c, var(--primary-color)); font-size: .92rem;
}
.katalog-ad { font-weight: 600; font-size: .97rem; color: var(--dark-color); flex: 1; min-width: 0; }
.katalog-sayi {
  font-size: .72rem; font-weight: 600; padding: 2px 10px; border-radius: 11px;
  background: color-mix(in srgb, var(--c, #00bcd4) 12%, #fff); color: var(--c, var(--primary-color));
}
.katalog-ok { color: var(--muted-color); font-size: .78rem; transition: transform .22s ease; }
.katalog-bolum.acik .katalog-ok { transform: rotate(180deg); }
.katalog-icerik {
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 14px; border-top: 1px solid var(--line-color); padding-top: 12px;
}
.katalog-bolum.acik .katalog-icerik { display: flex; }
.katalog-link {
  padding: 5px 12px; border-radius: 14px; background: var(--surface-soft);
  font-size: .8rem; color: var(--text-color); transition: var(--transition);
}
.katalog-link:hover { background: var(--c, var(--primary-color)); color: #fff; }

/* ============================================================== rehberler ==
   Rehber tarafı, hesaplama tarafından RENKLE ayrışır: araçlar turkuaz,
   rehberler kehribar. Düzen, bileşen ve etkileşim aynı kalır ki kullanıcı
   iki bölüm arasında geçerken yeniden öğrenmek zorunda kalmasın.        */
:root {
  --rehber: #f59e0b;
  --rehber-koyu: #b45309;
  --rehber-acik: #fef3c7;
  --rehber-yumusak: #fffbeb;
}

.nav-rehber { color: var(--rehber-koyu); text-decoration: none; }
.nav-rehber:hover { background: var(--rehber-acik); color: var(--rehber-koyu); }
.nav-rehber i { font-size: .85rem; }
/* Kılavuz artık bir ANA BÖLÜM değil, "Hesaplama Araçları"na bağlı bir alt
   bağlantı. Eskiden Eğlence/Alet Çantası ile aynı bölüm biçimini (dolgu zemin,
   kalın yazı, alt çizgi) taşıyordu; girinti eklense bile menüde dördüncü bir
   bölüm gibi okunuyordu. Kalan tek şey ikon rengi — kimliğini koruyor ama
   hiyerarşide bir alt seviyede duruyor. */
.mobil-rehber {
  display: flex; align-items: center; gap: 10px;
}
.mobil-rehber small {
  margin-left: auto; background: var(--rehber-yumusak); color: var(--rehber-koyu);
  border-radius: 20px; padding: 1px 9px; font-size: .72rem;
}

.hero-rehber {
  background: linear-gradient(135deg, rgba(245, 158, 11, .13), rgba(217, 119, 6, .07));
}
.hero-rehber h1 span {
  background: linear-gradient(to right, var(--rehber), var(--rehber-koyu));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-rehber .hero-search input:focus {
  border-color: var(--rehber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
}
.hero-rehber .tag { color: var(--rehber-koyu); }
.hero-rehber .tag:hover { background: var(--rehber); color: #fff; }
button.tag { border: 0; font: inherit; cursor: pointer; }

.hero-rozet {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--rehber); color: #fff;
}

.rehber-grid {
  display: grid; gap: 14px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.rehber-kart {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  align-items: start; position: relative;
  padding: 16px 18px; background: var(--surface); border-radius: var(--border-radius);
  border: 1px solid var(--line-color); border-left: 3px solid var(--rehber);
  box-shadow: var(--shadow-soft); text-decoration: none; color: inherit;
  transition: var(--transition);
}
.rehber-kart:hover {
  transform: translateY(-2px); box-shadow: var(--box-shadow);
  border-color: var(--rehber);
}
.rehber-kart-ikon {
  width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 12px; background: var(--rehber-acik); color: var(--rehber-koyu);
}
.rehber-kart-metin { min-width: 0; }
.rehber-kart-metin strong { display: block; font-size: .98rem; margin-bottom: 3px; }
.rehber-kart-metin small {
  color: var(--muted-color); font-size: .82rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rehber-kart-etiket {
  position: absolute; top: 10px; right: 12px; font-size: .68rem;
  color: var(--rehber-koyu); background: var(--rehber-yumusak);
  padding: 2px 8px; border-radius: 12px;
}
.rehber-kart-metin strong { padding-right: 96px; }

.katalog-rehber .katalog-baslik { border-left-color: var(--rehber); }
.katalog-rehber .katalog-link:hover { color: var(--rehber-koyu); background: var(--rehber-yumusak); }

/* ================================================================= atölye ==
   Atölye, hesaplama araçlarından görsel olarak da ayrışır: araçlar turkuaz,
   rehberler kehribar, atölye mor/pembe. Her aracın kendi rengi `--c` ile
   kayıttan gelir; buradaki hiçbir kural araç adı bilmez.               */
.nav-atolye { color: #7c3aed; text-decoration: none; }
.nav-atolye:hover { background: #f3e8ff; color: #6d28d9; }
.nav-atolye i { font-size: .85rem; }
.mobil-atolye {
  display: flex; align-items: center; gap: 10px; font-weight: 600;
  color: #6d28d9 !important; background: #faf5ff;
  border-bottom: 1px solid #f3e8ff;
}
.mobil-atolye small {
  margin-left: auto; background: #7c3aed; color: #fff;
  border-radius: 20px; padding: 1px 9px; font-size: .72rem;
}

.hero-atolye {
  background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(236, 72, 153, .09));
}
.hero-atolye h1 span {
  background: linear-gradient(to right, #7c3aed, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-rozet-atolye { background: #7c3aed; }

.atolye-grid {
  display: grid; gap: 16px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.atolye-kart {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 20px;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line-color); border-left: 4px solid var(--c, #7c3aed);
  box-shadow: var(--shadow-soft); text-decoration: none; color: inherit;
  transition: var(--transition);
}
.atolye-kart:hover {
  transform: translateY(-3px); box-shadow: var(--box-shadow-hover);
  border-color: var(--c, #7c3aed);
}
.atolye-kart-ikon {
  width: 54px; height: 54px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 15px; font-size: 1.3rem;
  background: color-mix(in srgb, var(--c, #7c3aed) 13%, #fff); color: var(--c, #7c3aed);
}
.atolye-kart-metin { min-width: 0; }
.atolye-kart-metin strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.atolye-kart-metin small { color: var(--muted-color); font-size: .85rem; line-height: 1.55; display: block; }
.atolye-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.atolye-etiketler em {
  font-style: normal; font-size: .7rem; padding: 2px 9px; border-radius: 12px;
  background: color-mix(in srgb, var(--c, #7c3aed) 11%, #fff); color: var(--c, #7c3aed);
}
.atolye-kart-ok { color: var(--c, #7c3aed); flex-shrink: 0; }

.atolye-not {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 8px;
  padding: 14px 16px; border-radius: var(--border-radius);
  background: var(--surface-soft); color: var(--muted-color); font-size: .86rem;
}
.atolye-not i { color: #7c3aed; margin-top: 3px; }

/* ------------------------------------------------------------ araç sayfası */
.atolye-baslik { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.atolye-baslik-ikon {
  width: 60px; height: 60px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 18px; font-size: 1.5rem;
  background: color-mix(in srgb, var(--c, #7c3aed) 13%, #fff); color: var(--c, #7c3aed);
}
.atolye-baslik h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 3px; }
.atolye-baslik p { color: var(--muted-color); font-size: .92rem; }

.atolye-kap { margin-bottom: 22px; }
.atolye-yukleniyor {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 320px; border-radius: var(--radius-lg);
  background: var(--surface-soft); color: var(--muted-color);
}

.atolye-sahne {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--box-shadow);
}
.atolye-sahne[data-tema="koyu"] { background: #05060a; }
.atolye-sahne[data-tema="acik"] { background: var(--surface); border: 1px solid var(--line-color); }
.atolye-sahne:is(:fullscreen, .tamekran-acik) { border-radius: 0; }

.atolye-tuval { display: block; width: 100%; height: min(68vh, 620px); touch-action: none; cursor: crosshair; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .atolye-tuval { height: 100vh; }

.atolye-ust-cubuk {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.atolye-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  backdrop-filter: blur(8px); font: inherit; font-size: .82rem; font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
.atolye-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.atolye-btn.etkin { background: #7c3aed; }
.atolye-btn-panel { margin-left: auto; }
.atolye-btn-genis { width: 100%; justify-content: center; background: rgba(255, 255, 255, .14); }

.atolye-panel {
  position: absolute; top: 60px; right: 12px; bottom: 12px; z-index: 6;
  width: min(92vw, 320px); display: flex; flex-direction: column;
  background: rgba(12, 14, 22, .92); backdrop-filter: blur(14px);
  border-radius: 16px; color: #e5e7eb;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.atolye-panel[hidden] { display: none; }
.atolye-panel-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .92rem;
}
.atolye-panel-kapat {
  border: 0; background: transparent; color: #9ca3af; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
}
.atolye-panel-kapat:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.atolye-panel-govde { flex: 1; overflow-y: auto; padding: 6px 16px 14px; }
.atolye-panel-alt { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }

.atolye-bolum { margin-top: 14px; }
.atolye-bolum h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: #a78bfa; margin-bottom: 8px;
}
.atolye-alan { display: block; margin-bottom: 13px; font-size: .82rem; }
.atolye-alan-ad { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.atolye-ipucu { display: block; color: #9ca3af; font-size: .7rem; line-height: 1.35; margin-top: 2px; }
.atolye-deger { margin-left: auto; color: #a78bfa; font-variant-numeric: tabular-nums; font-size: .78rem; }
.atolye-alan-pasif { opacity: .38; pointer-events: none; }

.atolye-kaydirac {
  width: 100%; height: 4px; border-radius: 3px; appearance: none;
  background: rgba(255, 255, 255, .18); outline: none; cursor: pointer;
}
.atolye-kaydirac::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: #a78bfa; cursor: pointer; border: 0;
}
.atolye-kaydirac::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: #a78bfa; border: 0; cursor: pointer;
}
.atolye-secim {
  width: 100%; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: .82rem;
  background: rgba(255, 255, 255, .09); color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, .14);
}
.atolye-secim option { background: #12141c; color: #e5e7eb; }

.atolye-alan-anahtar { display: flex; align-items: center; gap: 10px; }
.atolye-alan-anahtar .atolye-alan-ad { flex: 1; margin-bottom: 0; display: block; }
.atolye-alan-anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.atolye-switch {
  position: relative; width: 38px; height: 21px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255, 255, 255, .2); transition: background .2s ease;
}
.atolye-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: transform .2s ease;
}
.atolye-alan-anahtar input:checked ~ .atolye-switch { background: #7c3aed; }
.atolye-alan-anahtar input:checked ~ .atolye-switch::after { transform: translateX(17px); }

.atolye-yardim {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 4; padding: 6px 14px; border-radius: 16px; white-space: nowrap;
  background: rgba(0, 0, 0, .42); color: rgba(255, 255, 255, .82);
  font-size: .74rem; backdrop-filter: blur(6px); pointer-events: none;
}
.atolye-sahne[data-tema="acik"] .atolye-yardim {
  background: var(--surface-soft); color: var(--muted-color); border: 1px solid var(--line-color);
}
.atolye-yardim kbd {
  padding: 1px 6px; border-radius: 5px; font-family: inherit; font-size: .92em;
  background: rgba(255, 255, 255, .16);
}
.atolye-sahne[data-tema="acik"] .atolye-yardim kbd { background: #fff; border: 1px solid var(--line-color); }

.atolye-hata {
  display: grid; place-items: center; gap: 12px; text-align: center;
  min-height: 320px; padding: 30px; border-radius: var(--radius-lg);
  background: var(--surface-soft);
}
.atolye-hata i { font-size: 2.2rem; color: var(--warn); }
.atolye-hata p { color: var(--muted-color); max-width: 460px; }

.atolye-bilgi {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.atolye-bilgi-kart {
  padding: 18px; border-radius: var(--border-radius);
  background: var(--surface); border: 1px solid var(--line-color);
}
.atolye-bilgi-kart h2 { font-size: 1rem; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.atolye-bilgi-kart h2 i { color: #7c3aed; }
.atolye-bilgi-kart ul { padding-left: 18px; }
.atolye-bilgi-kart li, .atolye-bilgi-kart p { color: var(--muted-color); font-size: .88rem; line-height: 1.65; }
.atolye-diger { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------- boyama stüdyosu -- */
.boyama-arac-cubugu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-color);
  background: var(--surface-soft);
}
.boyama-grup { display: flex; gap: 6px; }
.boyama-eylem { margin-left: auto; }
.boyama-arac {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-color); border-radius: 10px; cursor: pointer;
  background: var(--surface); color: var(--text-color); font-size: .92rem;
  transition: var(--transition);
}
.boyama-arac:hover:not(:disabled) { border-color: #ec4899; color: #ec4899; }
.boyama-arac.etkin { background: #ec4899; border-color: #ec4899; color: #fff; }
.boyama-arac:disabled { opacity: .35; cursor: not-allowed; }

.boyama-kalinlik { display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.boyama-kalinlik i { color: var(--muted-color); font-size: .6rem; }
.boyama-kalinlik input { width: 110px; accent-color: #ec4899; }
.boyama-kalinlik b { min-width: 20px; color: var(--muted-color); font-variant-numeric: tabular-nums; }

.boyama-govde {
  display: grid; gap: 14px; padding: 14px;
  grid-template-columns: minmax(0, 1fr) 220px;
}
.boyama-tuval-kap {
  min-width: 0; display: grid; place-items: center;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 18px 18px;
  border-radius: var(--border-radius); overflow: hidden;
}
#boyamaTuval { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.boyama-kova-imleci { cursor: cell; }

.boyama-yan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.boyama-yan h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted-color); margin-bottom: 8px;
}
.boyama-palet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.boyama-renk {
  aspect-ratio: 1; border-radius: 8px; cursor: pointer;
  background: var(--r); border: 2px solid var(--line-color);
  transition: transform .15s ease, border-color .15s ease;
}
.boyama-renk:hover { transform: scale(1.12); }
.boyama-renk.etkin { border-color: var(--dark-color); transform: scale(1.12); }
.boyama-ozel {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .78rem; color: var(--muted-color);
}
.boyama-ozel input { width: 34px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }

.boyama-sablonlar { display: flex; flex-direction: column; gap: 5px; }
.boyama-sablon {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--line-color); border-radius: 9px; cursor: pointer;
  background: var(--surface); color: var(--text-color);
  font: inherit; font-size: .82rem; text-align: left;
  transition: var(--transition);
}
.boyama-sablon i { color: #ec4899; width: 16px; text-align: center; }
.boyama-sablon:hover { border-color: #ec4899; }
.boyama-sablon.etkin { background: #fdf2f8; border-color: #ec4899; color: #be185d; font-weight: 600; }
.boyama-sahne .atolye-yardim { position: static; transform: none; margin: 0 14px 14px; text-align: center; }

@media (max-width: 860px) {
  .boyama-govde { grid-template-columns: minmax(0, 1fr); }
  .boyama-palet { grid-template-columns: repeat(9, 1fr); }
  .boyama-sablonlar { flex-direction: row; flex-wrap: wrap; }
  .atolye-panel { left: 12px; width: auto; }
  .atolye-yardim { display: none; }
}

/* ============================================================== reklam ====
   Slot tanımlı değilse bu blok hiç basılmaz (bkz. core/reklam.js).
   `min-height` yerleşim kaymasını (CLS) önler: reklam yüklenirken alan
   zaten ayrılmış olur, içerik aşağı zıplamaz. */
.reklam-alani {
  margin: 22px auto;
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.reklam-alani ins { width: 100%; }
.reklam-ust { margin-top: 12px; }
.reklam-alt { margin-bottom: 12px; }
.reklam-makaleIci { margin: 32px auto; }
.reklam-aracAlti { margin: 26px auto 8px; }

@media (max-width: 640px) {
  .reklam-alani { min-height: 250px; margin: 16px auto; }
}

/* ========================================================== çerez onayı ====
   Consent Mode v2 ile çalışır: onay verilene kadar GA4/AdSense çerez yazmaz.
   Banner alttan gelir, içeriği örtmez ve karar verilince bir daha çıkmaz. */
.cerez-banner {
  /* AdSense sabit (anchor) reklamları çok yüksek z-index kullanıyor;
     onay banner'ı onların ÜSTÜNDE kalmalı, yoksa kullanıcı karar veremez. */
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2147483000;
  background: var(--surface); border: 1px solid var(--line-color);
  border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  transform: translateY(120%); opacity: 0;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), opacity .3s ease;
}
.cerez-banner.acik { transform: translateY(0); opacity: 1; }
.cerez-icerik {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px;
}
.cerez-metin {
  flex: 1 1 320px; min-width: 0;
  font-size: .86rem; line-height: 1.6; color: var(--text-color);
}
.cerez-metin b { color: var(--dark-color); }
.cerez-metin a { color: var(--primary-dark); }
.cerez-dugmeler { display: flex; gap: 8px; flex-shrink: 0; }
.cerez-btn {
  padding: 9px 18px; border-radius: 22px; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600;
  border: 1px solid var(--line-color); background: var(--surface);
  color: var(--text-color); transition: var(--transition); white-space: nowrap;
}
.cerez-btn:hover { border-color: var(--muted-color); }
.cerez-kabul {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-color: transparent; color: #fff;
}
.cerez-kabul:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 150, 136, .3); }

@media (max-width: 560px) {
  .cerez-icerik { padding: 14px 16px; gap: 12px; }
  .cerez-dugmeler { width: 100%; }
  .cerez-btn { flex: 1; }
}

/* Tam ekran düğmesi sahnenin içindedir; kendi araç çubuğu olmayan
   araçlarda sağ üste serbest konumlanır. */
.atolye-tamekran-serbest {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  background: rgba(0, 0, 0, .5); color: #fff; backdrop-filter: blur(8px);
}
.boyama-eylem .atolye-tamekran {
  width: auto; padding: 0 14px; background: var(--surface);
  color: var(--text-color); border: 1px solid var(--line-color); border-radius: 10px;
}
.boyama-eylem .atolye-tamekran span { display: none; }
/* Boyama gibi açık temalı sahneler de tam ekranda tuvali doldursun */
.atolye-sahne:is(:fullscreen, .tamekran-acik) { border-radius: 0; height: 100vh; display: flex; flex-direction: column; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .boyama-govde { flex: 1; min-height: 0; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .boyama-tuval-kap { height: 100%; }
/* Tam ekranda cikis yazisi gorunsun: kullanicinin Esc'i bilmesi gerekmesin */
.atolye-sahne:is(:fullscreen, .tamekran-acik) .boyama-eylem .atolye-tamekran span { display: inline; }


/* Rota ilerleme çizgisi — araç grubu tembel inerken üstte ince bir şerit.
   120 ms'den kısa beklemelerde hiç oluşturulmaz (bkz. app.js/ilerlemeBaslat). */
.rota-ilerleme {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--primary-color, #0097a7), #7c3aed);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .25s ease;
}
.rota-ilerleme.acik { transform: scaleX(.7); }
.rota-ilerleme.bitti { transform: scaleX(1); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rota-ilerleme { transition: none; }
}

/* ============================================================ eğlence ==== */
/* Ortak: sahneler `.atolye-sahne` çerçevesini paylaşır, tam ekran ve
   temizleme davranışı çerçeveden gelir (bkz. core/views.js). */

/* --- 81 İl Haritası --- */
.harita-sahne { display: flex; flex-direction: column; min-height: 60vh; }
.harita-cubuk {
  position: static; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; background: var(--surface-soft);
  border-bottom: 1px solid var(--line-color);
}
.harita-soru { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.harita-tur { font-size: .75rem; color: var(--muted-color); }
.harita-soru strong { font-size: 1.05rem; }
.harita-skor {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
  color: #b45309; background: #fef3c7; padding: 6px 14px; border-radius: 20px;
  white-space: nowrap;
}
.harita-govde { position: relative; flex: 1; min-height: 320px; }
.harita-govde canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.harita-bildirim {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 9px 18px; border-radius: 22px; font-size: .88rem; white-space: nowrap;
  box-shadow: var(--box-shadow); backdrop-filter: blur(8px);
}
.harita-bildirim[hidden] { display: none; }
.harita-bildirim.ton-iyi { background: #dcfce7; color: #166534; }
.harita-bildirim.ton-orta { background: #fef3c7; color: #92400e; }
.harita-bildirim.ton-kotu { background: #fee2e2; color: #991b1b; }
.harita-alt { padding: 14px 16px; text-align: center; border-top: 1px solid var(--line-color); }
.harita-ipucu { margin: 0; color: var(--muted-color); font-size: .88rem; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .harita-govde { flex: 1; }

/* --- Sıralaman Ne Demek? --- */
.siralama-sahne { padding: 22px; }
.siralama-giris label { display: block; font-weight: 600; margin-bottom: 8px; }
.siralama-giris-satir { display: flex; gap: 10px; flex-wrap: wrap; }
.siralama-giris-satir input {
  flex: 1 1 200px; padding: 12px 16px; font: inherit; font-size: 1.1rem;
  border: 1px solid var(--line-color); border-radius: 10px; background: var(--surface);
  color: var(--text-color);
}
.siralama-not { margin: 10px 0 0; font-size: .82rem; color: var(--muted-color); }
.siralama-ozet { margin: 22px 0 14px; font-size: 1.05rem; }
.siralama-kartlar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.siralama-kart {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.siralama-kart-ikon {
  flex: 0 0 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface); color: var(--primary-color);
}
.siralama-kart-metin { margin: 0 0 4px; line-height: 1.45; }
.siralama-kart-kaynak { color: var(--muted-color); font-size: .78rem; }
.siralama-eylem { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.siralama-yukleniyor, .sayac-yukleniyor, .erime-durum {
  display: flex; align-items: center; gap: 10px; padding: 20px;
  color: var(--muted-color);
}
.siralama-yukleniyor[hidden], .erime-durum[hidden] { display: none; }

/* --- Paran Ne Kadar Eridi? --- */
.erime-sahne { padding: 22px; }
.erime-giris { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.erime-alan { flex: 1 1 180px; }
.erime-alan label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.erime-alan input, .erime-alan select {
  width: 100%; padding: 11px 14px; font: inherit; border: 1px solid var(--line-color);
  border-radius: 10px; background: var(--surface); color: var(--text-color);
}
.erime-ozet { margin: 20px 0 14px; font-size: 1.05rem; }
.erime-kartlar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.erime-kart {
  padding: 16px; border-radius: 12px; background: var(--surface-soft);
  border: 1px solid var(--line-color); border-top: 3px solid var(--c, var(--primary-color));
}
.erime-kart h3 { margin: 8px 0 10px; font-size: .95rem; }
.erime-kart-ikon { color: var(--c, var(--primary-color)); font-size: 1.2rem; }
.erime-kart-adet { margin: 0 0 4px; font-size: .88rem; color: var(--muted-color); }
.erime-kart-bugun { margin: 0 0 8px; font-size: 1.02rem; }
.erime-kart-kat {
  margin: 0; display: inline-block; padding: 3px 10px; border-radius: 14px;
  background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--c);
}
.erime-eksik {
  grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 10px;
  background: var(--surface-soft); color: var(--muted-color); font-size: .84rem;
}
.erime-kaynak { margin: 16px 0 0; font-size: .78rem; color: var(--muted-color); }

/* --- Türkiye Sayaçları --- */
.sayac-sahne { padding: 22px; }
.sayac-bas { text-align: center; margin-bottom: 20px; }
.sayac-bas h2 { margin: 0 0 6px; font-size: 1.1rem; }
.sayac-bas p { margin: 0; color: var(--primary-color); font-weight: 600; font-variant-numeric: tabular-nums; }
.sayac-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sayac-kart {
  padding: 16px; border-radius: 12px; background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.sayac-ikon { color: var(--primary-color); font-size: 1.15rem; }
.sayac-kart h3 { margin: 8px 0 10px; font-size: .92rem; line-height: 1.35; }
.sayac-deger { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sayac-deger span { font-size: .82rem; font-weight: 500; color: var(--muted-color); }
.sayac-kart small { color: var(--muted-color); font-size: .78rem; line-height: 1.4; display: block; }
.sayac-kart-sabit { opacity: .88; }
.sayac-bos { padding: 20px; color: var(--muted-color); }
.sayac-kaynak { margin: 18px 0 0; font-size: .78rem; color: var(--muted-color); text-align: center; }

@media (max-width: 640px) {
  .harita-cubuk {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .siralama-sahne, .erime-sahne, .sayac-sahne { padding: 16px; }
}
.siralama-kart-rozet {
  margin: 0 0 6px; display: inline-block; padding: 2px 10px; border-radius: 14px;
  font-size: .76rem; font-weight: 600;
}
.siralama-kart-rozet.ton-denk { background: #dcfce7; color: #166534; }
.siralama-kart-rozet.ton-fazla { background: #fee2e2; color: #991b1b; }
.siralama-kart-rozet.ton-az { background: #e0f2fe; color: #075985; }

/* --- Eğlence: ortak başlık çubuğu ------------------------------------------
   Belge tipi araçlarda (form + sonuç) tam ekran düğmesinin yuvası burası.
   Önceden düğme `position:absolute` ile sağ üste konuyordu ve mobilde
   formun üstüne biniyordu. */
.eglence-cubuk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: var(--surface-soft);
  border-bottom: 1px solid var(--line-color);
}
.eglence-cubuk h2 {
  margin: 0; font-size: .98rem; display: flex; align-items: center; gap: 9px;
}
.eglence-cubuk h2 i { color: var(--primary-color); }
.eglence-cubuk .atolye-tamekran {
  width: auto; padding: 0 14px; height: 34px; background: var(--surface);
  color: var(--text-color); border: 1px solid var(--line-color); border-radius: 9px;
  flex: 0 0 auto;
}
@media (max-width: 560px) { .eglence-cubuk .atolye-tamekran span { display: none; } }

/* Belge tipi sahneler tam ekranda kaydırılabilir olmalı — yoksa içerik
   ekrandan taşıyor ve kullanıcı sonucun altını hiç göremiyor. */
.atolye-sahne:is(:fullscreen, .tamekran-acik) { overflow-y: auto; }
/* Tam ekranda başlık çubuğu üstte sabit kalsın */
.atolye-sahne:is(:fullscreen, .tamekran-acik) .eglence-cubuk {
  position: sticky; top: 0; z-index: 5;
}
/* Tepki alanı tam ekranda boşluk bırakmasın */
.atolye-sahne:is(:fullscreen, .tamekran-acik) .tepki-alan { flex: 1; min-height: 60vh; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .tepki-sahne { display: flex; flex-direction: column; }
.siralama-sahne, .erime-sahne, .sayac-sahne, .alabilir-sahne { padding: 0 0 22px; }
.siralama-giris, .erime-giris, .alabilir-giris,
.siralama-sonuc, .erime-sonuc, .alabilir-sonuc,
.sayac-bas, .sayac-izgara, .sayac-kaynak,
.erime-durum, .siralama-yukleniyor, .alabilir-cevrim, .alabilir-uyari,
.erime-kaynak, .siralama-eylem { margin-left: 22px; margin-right: 22px; }

/* --- Diğer eğlence araçları kartları --- */

.atolye-tumu { margin: 16px 0 0; text-align: center; }
.atolye-tumu a { font-weight: 600; }

/* --- O Parayla Ne Alabilirdim? --- */
.alabilir-cevrim {
  margin: 12px 22px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--surface-soft); font-size: .85rem; color: var(--muted-color);
}
.alabilir-cevrim[hidden] { display: none; }
.alabilir-grup { margin-top: 22px; }
.alabilir-grup h3 {
  margin: 0 0 12px; font-size: .95rem; display: flex; align-items: center; gap: 8px;
}
.alabilir-grup h3 span {
  font-size: .74rem; font-weight: 500; padding: 2px 9px; border-radius: 12px;
  background: var(--surface-soft); color: var(--muted-color);
}
.alabilir-izgara { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.alabilir-kart {
  padding: 14px; border-radius: 11px; background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.alabilir-kart.yetersiz { opacity: .55; }
.alabilir-ikon { color: var(--primary-color); }
.alabilir-adet { margin: 8px 0 2px; font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.alabilir-adet b { font-weight: 700; }
.alabilir-ad { margin: 0 0 5px; font-size: .88rem; line-height: 1.35; }
.alabilir-kart small { color: var(--muted-color); font-size: .74rem; }
.alabilir-uyari {
  margin-top: 22px; padding: 13px 15px; border-radius: 10px;
  background: #fef3c7; color: #78350f; font-size: .83rem; line-height: 1.5;
}
.alabilir-uyari a { color: #78350f; font-weight: 600; }
.sayac-bas-etiket { margin: 0 0 4px; font-size: .82rem; color: var(--muted-color); }

@media (max-width: 640px) {
  .siralama-giris, .erime-giris, .alabilir-giris,
  .siralama-sonuc, .erime-sonuc, .alabilir-sonuc,
  .sayac-bas, .sayac-izgara, .sayac-kaynak, .erime-durum,
  .siralama-yukleniyor, .alabilir-cevrim, .alabilir-uyari,
  .erime-kaynak, .siralama-eylem { margin-left: 15px; margin-right: 15px; }
  .erime-giris, .alabilir-giris { flex-direction: column; align-items: stretch; }
  .erime-giris .btn, .alabilir-giris .btn { width: 100%; justify-content: center; }
  .siralama-eylem .btn { flex: 1 1 46%; justify-content: center; }
  .alabilir-izgara { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .harita-alt .btn { flex: 1 1 46%; justify-content: center; }
  .harita-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
}

/* --- İkili karşılaştırma düzeni (Hangisi Pahalı?, Hangisi Hızlı?) --- */
.ikili-sahne { padding: 0 0 22px; }
.ikili-skor { display: flex; align-items: center; gap: 14px; }
.ikili-seri {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: #b45309; font-variant-numeric: tabular-nums;
}
.ikili-can { display: inline-flex; gap: 4px; color: #dc2626; }
.ikili-can .bos { opacity: .22; }
.ikili-govde { padding: 22px; }
.ikili-soru { margin: 0 0 18px; text-align: center; font-size: 1.05rem; }
.ikili-alan {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
}
.ikili-vs {
  align-self: center; font-weight: 700; color: var(--muted-color);
  font-size: .85rem; text-transform: uppercase;
}
.ikili-kalem {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 22px 16px; border-radius: 14px; cursor: pointer; font: inherit;
  background: var(--surface-soft); border: 2px solid var(--line-color);
  transition: border-color .18s ease, transform .18s ease;
  text-align: center; color: var(--text-color);
}
.ikili-kalem:hover:not(.ikili-dogru):not(.ikili-yanlis) {
  border-color: var(--primary-color); transform: translateY(-2px);
}
.ikili-ikon { font-size: 1.6rem; color: var(--primary-color); }
.ikili-kategori {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-color);
}
.ikili-ad { font-size: .95rem; line-height: 1.35; font-weight: 500; }
.ikili-deger { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ikili-sec {
  margin-top: 4px; font-size: .78rem; padding: 5px 14px; border-radius: 14px;
  background: var(--surface); color: var(--muted-color);
}
.ikili-kalem.ikili-dogru { border-color: #16a34a; background: #f0fdf4; }
.ikili-kalem.ikili-dogru .ikili-deger { color: #166534; }
.ikili-kalem.ikili-yanlis { border-color: #e2e8f0; opacity: .72; }
.ikili-sonuc { margin-top: 20px; text-align: center; }
.ikili-bildirim {
  margin: 0 0 8px; padding: 11px 16px; border-radius: 11px; display: inline-block;
}
.ikili-bildirim.ton-iyi { background: #dcfce7; color: #166534; }
.ikili-bildirim.ton-kotu { background: #fee2e2; color: #991b1b; }
.ikili-kaynaklar { margin: 0 0 14px; font-size: .76rem; color: var(--muted-color); }
.ikili-kaynaklar a { color: var(--muted-color); text-decoration: underline; }
.ikili-bitti p { margin: 0 0 12px; }
.ikili-bitti .siralama-eylem { justify-content: center; margin-left: 0; margin-right: 0; }
.ikili-kaynak {
  margin: 0 22px; font-size: .78rem; color: var(--muted-color); text-align: center;
}

@media (max-width: 640px) {
  .ikili-govde { padding: 16px; }
  .ikili-alan { grid-template-columns: 1fr; gap: 10px; }
  .ikili-vs { justify-self: center; }
  .ikili-kalem { padding: 16px 14px; flex-direction: row; text-align: left; flex-wrap: wrap; }
  .ikili-kalem .ikili-ad { flex: 1 1 100%; }
  .ikili-kaynak { margin: 0 15px; }
}

/* --- Mükemmel Çember --- */
.cember-sahne { display: flex; flex-direction: column; min-height: 62vh; }
.cember-cubuk {
  position: static; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .06);
}
.cember-bilgi { display: flex; flex-direction: column; gap: 2px; color: #e2e8f0; }
.cember-bilgi strong { font-size: .95rem; }
.cember-rekor { font-size: .76rem; color: #94a3b8; }
.cember-tuval { flex: 1; height: auto; min-height: 320px; cursor: crosshair; touch-action: none; }
.cember-sonuc { padding: 16px; text-align: center; background: rgba(255, 255, 255, .06); }
.cember-sonuc[hidden] { display: none; }
.cember-puan { margin: 0 0 4px; font-size: 1.6rem; color: #f8fafc; }
.cember-puan b { font-variant-numeric: tabular-nums; }
.cember-yorum { margin: 0 0 14px; color: #94a3b8; font-size: .9rem; }
.cember-sonuc .siralama-eylem { justify-content: center; margin: 0; }

/* --- Tepki Süresi --- */
.tepki-sahne { padding: 0 0 22px; }
.tepki-sayac { font-weight: 600; color: var(--muted-color); font-variant-numeric: tabular-nums; }
.tepki-alan {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: calc(100% - 44px); margin: 22px; min-height: 42vh;
  border: 0; border-radius: 16px; cursor: pointer; font: inherit;
  transition: background .12s ease; text-align: center; padding: 24px;
  touch-action: manipulation; user-select: none;
}
.tepki-alan.durum-bekliyor { background: #1e293b; color: #e2e8f0; }
.tepki-alan.durum-hazirlaniyor { background: #b91c1c; color: #fff; }
.tepki-alan.durum-yesil { background: #16a34a; color: #fff; }
.tepki-alan.durum-erken { background: #7c2d12; color: #fed7aa; }
.tepki-alan.durum-sonuc, .tepki-alan.durum-bitti { background: #1e293b; color: #e2e8f0; }
.tepki-ikon { font-size: 1.8rem; opacity: .8; }
.tepki-metin { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tepki-alt { font-size: .9rem; opacity: .8; }
.tepki-sonuc { margin: 0 22px; text-align: center; }
.tepki-sonuc[hidden] { display: none; }
.tepki-ozet { margin: 0 0 12px; font-size: 1.02rem; }
.tepki-liste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.tepki-rozet {
  padding: 5px 12px; border-radius: 14px; background: var(--surface-soft);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.tepki-rozet.en-iyi { background: #dcfce7; color: #166534; font-weight: 600; }
.tepki-rekor { margin: 0 0 14px; font-size: .88rem; color: var(--muted-color); }
.tepki-sonuc .siralama-eylem { justify-content: center; margin: 0; }

@media (max-width: 640px) {
  .tepki-alan { width: calc(100% - 30px); margin: 15px; min-height: 38vh; }
  .tepki-metin { font-size: 1.6rem; }
  .tepki-sonuc { margin: 0 15px; }
}

/* Tam ekran düğmesi AÇIK temalı sahnelerde okunur olmalı.
   `.atolye-btn` koyu sahneler (Akışkan Sanat) için tasarlandı: beyaz metin,
   yarı saydam beyaz zemin. Harita açık temalı olduğu için düğme beyaz
   üstüne beyaz kalıyor ve görünmüyordu — ölçüldü: metin rgb(255,255,255),
   çubuk zemini rgb(247,250,251).
   Kural tema niteliğine bağlı, tek tek araca değil; sonradan eklenen açık
   temalı araçlar da kendiliğinden doğru görünüyor. */
.atolye-sahne[data-tema="acik"] .atolye-tamekran {
  background: var(--surface);
  color: var(--text-color);
  border: 1px solid var(--line-color);
}
.atolye-sahne[data-tema="acik"] .atolye-tamekran:hover {
  background: var(--surface-soft);
  border-color: var(--primary-color);
}

/* --- Eğlence kategorileri --- */
.eglence-bolum { margin-bottom: 34px; }
.eglence-bolum-bas {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 2px solid var(--c, var(--primary-color));
}
.eglence-bolum-ikon {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center;
  border-radius: 11px; background: var(--surface-soft); color: var(--c);
  font-size: 1.05rem;
}
.eglence-bolum-bas h2 { margin: 0 0 2px; font-size: 1.15rem; }
.eglence-bolum-bas p { margin: 0; font-size: .85rem; color: var(--muted-color); }
.eglence-bolum-bas > div { flex: 1; min-width: 0; }
.eglence-bolum-sayi {
  flex: 0 0 auto; padding: 4px 12px; border-radius: 14px;
  background: var(--surface-soft); color: var(--c); font-weight: 700; font-size: .85rem;
}

/* --- Yetenek testleri ortak --- */
.test-sahne { padding: 0 0 22px; display: flex; flex-direction: column; }
.test-rekor { font-size: .8rem; color: var(--muted-color); }
.test-durum { padding: 16px 22px 0; text-align: center; color: var(--muted-color); font-size: .92rem; }
.test-govde {
  padding: 22px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; min-height: 42vh;
}
.test-aciklama { margin: 0; max-width: 460px; text-align: center; line-height: 1.6; color: var(--muted-color); }
.test-sonuc { padding: 0 22px; text-align: center; }
.test-sonuc[hidden] { display: none; }
.test-sonuc-baslik { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; }
.test-sonuc-alt { margin: 0 0 14px; color: var(--muted-color); }
.test-rozetler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.test-rozet {
  padding: 7px 14px; border-radius: 14px; background: var(--surface-soft);
  font-size: .84rem; color: var(--muted-color);
}
.test-rozet b { color: var(--text-color); font-size: 1rem; }
.test-sonuc .siralama-eylem { justify-content: center; margin: 0; }

/* --------------------------------------- sonuç ekranı: sıralama + öneriler

   Liderlik tablosu daha önce YALNIZCA sağ kenar çubuğundaydı. Tam ekranda
   kenar çubuğu görünmediği için oyuncu sırasını görmek üzere tam ekrandan
   çıkmak zorunda kalıyordu; oyundan kopma noktası tam olarak orasıydı.
   Bu blok sıralamayı ve "sıradaki oyun" önerilerini sonuç panelinin
   İÇİNE koyuyor, böylece akış tam ekranda kesilmiyor.                     */

.sonuc-lider {
  margin: 18px auto 0; max-width: 440px; text-align: left;
  background: var(--surface-soft); border-radius: 14px; padding: 12px 14px;
}
.sonuc-lider-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: .88rem; font-weight: 600;
}
.sonuc-lider-baslik i { color: #f59e0b; }
.sonuc-lider-sekme { display: flex; gap: 4px; }
.sonuc-lider-sekme button {
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  padding: 4px 9px; font-size: .76rem; color: var(--muted-color);
  font-family: inherit;
}
.sonuc-lider-sekme button:hover { background: var(--surface-color); }
.sonuc-lider-sekme button.aktif {
  background: var(--surface-color); color: var(--text-color); font-weight: 600;
}
.sonuc-lider-govde { min-height: 92px; }

/* Öneri kartları BAĞLANTI DEĞİL DÜĞME: SPA gezinmesi tam ekranı kapatırdı.
   Tıklama `belliolur:oyuna-gec` olayını atıyor, aracı views.js yerinde
   değiştiriyor ve tam ekran korunuyor.                                    */
.sonuc-oneri { margin-top: 20px; }
.sonuc-oneri-baslik {
  font-size: .82rem; color: var(--muted-color); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sonuc-oneri-kartlar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.sonuc-oneri-kart {
  flex: 1 1 150px; max-width: 210px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 14px; font-family: inherit;
  background: var(--surface-soft); color: var(--text-color);
  border: 1px solid transparent; border-left: 3px solid var(--c, #a855f7);
  transition: transform .15s ease, border-color .15s ease;
}
.sonuc-oneri-kart:hover {
  transform: translateY(-2px); border-color: var(--c, #a855f7);
}
.sonuc-oneri-kart > i { color: var(--c, #a855f7); font-size: 1.05rem; }
.sonuc-oneri-ad { font-weight: 600; font-size: .9rem; }
.sonuc-oneri-aciklama {
  font-size: .76rem; color: var(--muted-color); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kendi sonuç ekranını çizen oyunların (81 İl Haritası, Tepki Süresi,
   Hangisi Pahalı/Hızlı, Çılgın Şifre) sıralama + öneri sarmalayıcısı.
   Ortak çerçevedeki `.karne-yan` ile aynı işi görür.                      */
.sonuc-eklenti { display: grid; gap: 16px; margin-top: 18px; }
.sonuc-eklenti .sonuc-lider { margin: 0 auto; width: 100%; }
.sonuc-eklenti .sonuc-oneri { margin-top: 0; }

/* Tam ekranda sonuç paneli dikeyde esnesin ve düzgünce kaydırılabilsin */
.atolye-sahne:is(:fullscreen, .tamekran-acik) .test-sonuc {
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  padding-top: 18px;
  padding-bottom: 32px;
}
/* SONUÇ PANELİ TAM EKRANDA İKİ SÜTUN.
   Sıralama ve öneriler eklenince panel ~1100 piksele çıktı; tek sütunda
   eylem düğmeleri de öneri kartları da ekranın altında kalıyor, kullanıcı
   kaydırma yapmadığı için "sonuç gelmedi" sanıyordu. Dar tam ekranda
   (telefon, bölünmüş pencere) tek sütuna dönüyor.

   KAPSAM `.test-sonuc >`: kendi karnesini çizen araçların (81 İl Haritası)
   karnesi tek sütunlu kalmalı — orada alt alta akan 5 blok var, ikiye
   bölünürse bloklar yanlış sütunlara dağılır.                              */
@media (min-width: 900px) {
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .test-sonuc > .test-karne {
    max-width: 1060px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start; gap: 22px;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-lider,
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri {
    margin: 0; max-width: none;
  }
  /* Dar sağ sütunda kartlar yan yana sıkışmasın; alt alta dizilince de
     paneli uzatmasınlar diye açıklama tek satıra iniyor. */
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri-kart {
    flex: 1 1 100%; max-width: none; padding: 9px 12px; gap: 2px;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri-aciklama {
    -webkit-line-clamp: 1;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .sonuc-eklenti {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; max-width: 920px; margin-left: auto; margin-right: auto;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .sonuc-eklenti .sonuc-lider {
    max-width: none;
  }
  /* Önerisiz blokta tek sütun kalsın; tek kutuyu ekranın yarısına yaymak
     sıralama satırlarını gereksiz uzatıyordu. */
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .sonuc-eklenti-tek {
    grid-template-columns: minmax(0, 1fr); max-width: 480px;
  }
}

/* KISA TAM EKRAN (1366×768 dizüstü, en yaygın ikinci çözünürlük).
   İki sütuna geçince bile sağ sütun 87 piksel taşıyordu: sıralama + eylemler
   + üç öneri kartı 900 pikselde sığıyor, 768'de sığmıyor. Öneri kartlarının
   açıklaması burada düşüyor — ad ve ikon kartı tanıtmaya yetiyor, açıklama
   ise kart başına ~24 piksel yiyordu.                                      */
@media (min-width: 900px) and (max-height: 820px) {
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .test-sonuc {
    padding-top: 12px; padding-bottom: 16px;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri-aciklama {
    display: none;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri-kart {
    padding: 8px 12px;
  }
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-yan .sonuc-oneri-baslik {
    margin-bottom: 6px;
  }
}

/* Sonuç açıkken boş oyun gövdesi paneli aşağı itmesin: `bitir()` gövdeyi
   boşaltıyor ama `min-height: 42vh` onu ayakta tutuyordu.                 */
.test-sahne.sonuc-acik .test-govde { min-height: 0; padding: 0; gap: 0; }
/* Talimat satırı ("Gördüğün sayıyı yaz") sonuç ekranında hem yanlış hem de
   panelin üstünden yer yiyor. */
.test-sahne.sonuc-acik .test-durum { display: none; }
/* Tepki alanı tam ekranda 60vh yer kaplıyor; sonuç açıkken küçülmeli. */
.atolye-sahne:is(:fullscreen, .tamekran-acik).sonuc-acik .tepki-alan {
  flex: 0 0 auto; min-height: 24vh;
}

/* Panele kaydırırken yapışkan başlık çubuğunun altında kalmasın
   (site başlığı normal görünümde, oyun çubuğu tam ekranda).               */
.test-sonuc, .tepki-sonuc, .ikili-bitti,
.cember-sonuc, .siralama-sonuc, .hiz-sonuc-alt { scroll-margin-top: 90px; }
.atolye-sahne:is(:fullscreen, .tamekran-acik)
  :is(.test-sonuc, .tepki-sonuc, .ikili-bitti, .cember-sonuc, .siralama-sonuc, .hiz-sonuc-alt) {
  scroll-margin-top: 58px;
}

/* Tam ekran ögesi artık kapsayıcı; sahnenin ekranı doldurabilmesi için
   kapsayıcının kendi alt boşluğu ve arka planı sıfırlanmalı.              */
.atolye-kap.atolye-kap-tamekran {
  margin-bottom: 0; height: 100%; background: var(--bg-color);
}

/* Tam ekran görünümünde başlık, durum ve gövdenin kusursuz dengesi */
.atolye-sahne:is(:fullscreen, .tamekran-acik) {
  border-radius: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-color);
}
.atolye-sahne:is(:fullscreen, .tamekran-acik) .eglence-cubuk {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.atolye-sahne:is(:fullscreen, .tamekran-acik) .test-durum {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.atolye-sahne:is(:fullscreen, .tamekran-acik) :is(.test-govde, .bayrak-govde, .bayrak-govde-standart, .cokertme-govde, .cokertme-govde-standart, .mayin-govde, .mayin-govde-standart, .saymaca-govde, .saymaca-govde-standart, .zen-govde, .zen-govde-standart, .devre-govde, .devre-govde-standart, .qwop-govde, .qwop-govde-standart, .kurtcuk-govde, .kurtcuk-govde-standart, .piyano-govde, .piyano-govde-standart) {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px;
}

@media (max-width: 640px) {
  .sonuc-oneri-kart { flex: 1 1 100%; max-width: none; }
}

/* Sayı hafızası */
.test-sayi {
  margin: 0; font-size: clamp(2.4rem, 9vw, 4.2rem); font-weight: 700;
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.test-giris { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.test-giris input {
  padding: 12px 18px; font: inherit; font-size: 1.5rem; text-align: center;
  letter-spacing: .08em; width: min(320px, 70vw); border-radius: 10px;
  border: 1px solid var(--line-color); background: var(--surface); color: var(--text-color);
}

/* Sözel hafıza */
.test-kelime {
  margin: 0; font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 700; text-align: center;
}
.test-secim { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.test-secim .btn { min-width: 140px; justify-content: center; }

/* Görsel hafıza ızgarası */
.hafiza-izgara {
  display: grid; gap: 8px;
  grid-template-columns: repeat(var(--kenar), 1fr);
  width: min(420px, 84vw);
}
.hafiza-kare {
  aspect-ratio: 1; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface-soft); transition: background .16s ease, transform .16s ease;
  touch-action: manipulation;
}
@media (hover: hover) {
  .hafiza-kare:hover { transform: scale(1.04); }
}
.hafiza-kare.yanik { background: #7c3aed; }
.hafiza-kare.dogru { background: #16a34a; }
.hafiza-kare.yanlis { background: #dc2626; }
.hafiza-kare.kacan { background: #fbbf24; }

/* Sayı dizisi */
.dizi-alan {
  display: grid; gap: 6px; width: min(620px, 92vw);
  grid-template-columns: repeat(var(--sutun), 1fr);
  grid-template-rows: repeat(var(--satir), 1fr);
  aspect-ratio: 8 / 5;
}
.dizi-kutu {
  border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 700;
  font-size: clamp(.85rem, 2.4vw, 1.15rem); background: var(--primary-color); color: #fff;
  display: grid; place-items: center; transition: background .15s ease;
  touch-action: manipulation;
}
.dizi-kutu.kapali { color: transparent; background: #64748b; }
.dizi-kutu.kapali.acik { color: #fff; }
.dizi-kutu.bulundu { background: #16a34a; color: transparent; }
.dizi-kutu.yanlis { background: #dc2626; color: #fff; }

@media (max-width: 640px) {
  .test-govde { padding: 16px; min-height: 38vh; }
  .test-durum { padding: 14px 15px 0; }
  .test-sonuc { padding: 0 15px; }
  .eglence-bolum-bas { gap: 10px; }
  .eglence-bolum-bas p { display: none; }
}

/* Eğlence bildirimi — bu araçların ölçüm/tanı olmadığı her sayfada yazılı */
.eglence-bildirim {
  margin: 18px 0 0; padding: 12px 16px; border-radius: 11px;
  background: var(--surface-soft); color: var(--muted-color);
  font-size: .84rem; line-height: 1.55;
}
.eglence-bildirim i { color: var(--primary-color); margin-right: 6px; }
.eglence-bildirim b { color: var(--text-color); }

/* --- Hedef Vurma --- */
.hedef-alan {
  position: relative; width: min(820px, 94vw); height: min(64vh, 460px);
  background: var(--surface-soft); border-radius: 14px; overflow: hidden;
  cursor: crosshair; touch-action: manipulation;
}
.hedef {
  position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 32%, #f87171, #b91c1c 68%);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .16);
}

/* --- Renk Ayrımı --- */
.renk-izgara {
  display: grid; gap: 6px; grid-template-columns: repeat(var(--kenar), 1fr);
  width: min(400px, 84vw);
}
.renk-kare {
  aspect-ratio: 1; border: 0; border-radius: 8px; cursor: pointer;
  transition: transform .12s ease;
}
.renk-kare:hover { transform: scale(1.05); }
.renk-kare.dogru { outline: 3px solid #16a34a; outline-offset: 2px; }
.renk-kare.yanlis { outline: 3px solid #dc2626; outline-offset: 2px; }

/* --- Yazma Hızı --- */
.yazma-metin {
  width: min(720px, 92vw); padding: 18px; border-radius: 12px;
  background: var(--surface-soft); font-size: 1.12rem; line-height: 1.9;
  max-height: 34vh; overflow-y: auto; word-break: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.yazma-metin .dogru { color: #16a34a; }
.yazma-metin .yanlis { color: #dc2626; background: #fee2e2; border-radius: 3px; }
.yazma-metin .imlec { border-bottom: 3px solid var(--primary-color); }
.yazma-giris {
  width: min(720px, 92vw); padding: 14px 16px; font: inherit; font-size: 1.05rem;
  border-radius: 12px; border: 1px solid var(--line-color);
  background: var(--surface); color: var(--text-color); resize: none;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* --- Göz Kararı --- */
.goz-soru { margin: 0; font-size: 1.05rem; text-align: center; font-weight: 500; }
.goz-sekil {
  width: min(380px, 86vw); max-height: 155px; height: auto; background: var(--surface-soft);
  border-radius: 12px; padding: 8px 12px; margin: 4px auto;
}
.goz-sekil line { stroke: var(--text-color); stroke-width: 3; stroke-linecap: round; }
.goz-sekil rect { fill: none; stroke: var(--text-color); stroke-width: 3; }
.goz-sekil .vurgu { stroke: #7c3aed; }
.goz-sekil rect.vurgu { stroke: #7c3aed; fill: rgba(124, 58, 237, .12); }
.goz-sekil .vurgu-dolu { fill: #7c3aed; }
.goz-nokta circle { fill: var(--text-color); }
.goz-geri {
  margin: 4px 0 0; padding: 9px 15px; border-radius: 11px; font-size: .88rem;
}
.goz-geri.ton-iyi { background: #dcfce7; color: #166534; }
.goz-geri.ton-orta { background: #fef3c7; color: #92400e; }
.goz-geri.ton-kotu { background: #fee2e2; color: #991b1b; }

@media (max-width: 640px) {
  .hedef-alan { height: 46vh; }
  .yazma-metin { font-size: 1rem; line-height: 1.75; max-height: 28vh; }
}

/* --- Eğlence sayfası araması --- */
.eglence-arama {
  display: flex; align-items: center; gap: 11px; margin: 0 0 26px;
  padding: 13px 18px; border-radius: 13px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.eglence-arama i { color: var(--muted-color); }
.eglence-arama input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: 1rem;
  color: var(--text-color); outline: none; min-width: 0;
}

/* Dar mega panel — Rehber ve Eğlence menüleri kategori mega menüsü kadar
   geniş olmamalı, iki sütun yeterli. */
.mega-panel.mega-dar { min-width: min(560px, 92vw); }
.mega-tumu {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--primary-color);
}
.mega-tumu small {
  padding: 1px 8px; border-radius: 10px; background: var(--surface-soft);
  color: var(--muted-color); font-weight: 500;
}

/* --- Çeldirici (Stroop) --- */
.stroop-kelime {
  margin: 0; font-size: clamp(2.6rem, 10vw, 4.4rem); font-weight: 800;
  letter-spacing: .04em; text-align: center;
}
.stroop-secim { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.stroop-btn {
  padding: 11px 20px; border-radius: 11px; cursor: pointer; font: inherit;
  font-weight: 600; font-size: .92rem; color: #fff; border: 0;
  background: var(--c); transition: transform .12s ease;
}
.stroop-btn:hover { transform: translateY(-2px); }

/* --- Tıklama Hızı --- */
.tiklama-alan {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: min(420px, 88vw); min-height: 34vh; border: 0; cursor: pointer;
  border-radius: 18px; background: #1e293b; color: #f8fafc; font: inherit;
  touch-action: manipulation; user-select: none;
}
.tiklama-sayi { font-size: 3.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tiklama-alt { font-size: .92rem; opacity: .75; }

/* --- Zihinden Matematik --- */
.mat-soru {
  margin: 0; font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mat-giris {
  padding: 12px 20px; font: inherit; font-size: 1.8rem; text-align: center;
  width: min(240px, 66vw); border-radius: 12px; border: 2px solid var(--line-color);
  background: var(--surface); color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.mat-giris.yanlis { border-color: #dc2626; background: #fee2e2; }

/* --- Eş Bulma --- */
.es-tahta {
  display: grid; gap: 9px; grid-template-columns: repeat(4, 1fr);
  width: min(400px, 88vw);
}
.es-kart {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer;
  background: transparent; perspective: 600px;
}
.es-on, .es-arka {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 11px; font-size: 1.5rem; transition: transform .28s ease;
  backface-visibility: hidden;
}
.es-arka { background: var(--primary-color); color: #fff; transform: rotateY(0deg); }
.es-on { background: var(--surface-soft); color: var(--c); transform: rotateY(180deg); }
.es-kart.acik .es-arka, .es-kart.bulundu .es-arka { transform: rotateY(-180deg); }
.es-kart.acik .es-on, .es-kart.bulundu .es-on { transform: rotateY(0deg); }
.es-kart.bulundu { opacity: .55; cursor: default; }

/* --- Ritim Tutma --- */
.ritim-alan {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: min(400px, 88vw); min-height: 32vh; border: 0; cursor: pointer;
  border-radius: 18px; font: inherit; touch-action: manipulation; user-select: none;
  transition: transform .07s ease, background .12s ease;
}
.ritim-alan.durum-isinma { background: #1e293b; color: #e2e8f0; }
.ritim-alan.durum-olcum { background: #d97706; color: #fff; }
.ritim-alan.vuruldu { transform: scale(.97); }
.ritim-ikon { font-size: 2rem; opacity: .85; }
.ritim-metin { font-size: 1.7rem; font-weight: 700; }
.ritim-alt { font-size: .9rem; opacity: .8; }

/* --- Şekil Döndürme --- */
.dondur-alan { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.dondur-sekil {
  width: min(180px, 38vw); height: auto; background: var(--surface-soft);
  border-radius: 12px;
}
.dondur-sekil polygon { stroke-width: 3; stroke-linejoin: round; }
.dondur-vs { color: var(--muted-color); font-size: 1.2rem; }
.dondur-secim { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.dondur-secim .btn { min-width: 150px; justify-content: center; }

/* --- Renk Sırası (Simon) --- */
.simon-alan {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: min(340px, 82vw);
}
.simon-panel {
  aspect-ratio: 1; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--c); opacity: .42; transition: opacity .12s ease, transform .12s ease;
}
.simon-panel.yanik { opacity: 1; transform: scale(1.04); }

/* --- Hızlı Sayma --- */
.sayma-alan {
  width: min(360px, 82vw); height: auto; aspect-ratio: 1;
  background: var(--surface-soft); border-radius: 14px;
}
.sayma-alan circle { fill: var(--text-color); }

/* --- Git / Gitme --- */
.gitgel-alan {
  display: grid; place-items: center; width: min(400px, 88vw); min-height: 34vh;
  border: 0; border-radius: 18px; cursor: pointer; font: inherit;
  touch-action: manipulation; user-select: none; transition: background .1s ease;
}
.gitgel-alan.durum-bekle { background: #1e293b; color: #94a3b8; }
.gitgel-alan.durum-git { background: #16a34a; color: #fff; }
.gitgel-alan.durum-dur { background: #dc2626; color: #fff; }
.gitgel-metin { font-size: 2.4rem; font-weight: 800; letter-spacing: .06em; }

/* --- Görsel Arama --- */
.arama-alan {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  width: min(620px, 92vw);
}
.arama-oge {
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  color: var(--primary-color); font-size: 1.1rem; display: grid; place-items: center;
  border-radius: 8px;
}
.arama-oge.yanlis { background: #fee2e2; }

/* --- Harf Karıştırma --- */
.anagram-karisik {
  margin: 0; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 700;
  letter-spacing: .12em; text-align: center; text-transform: uppercase;
}

/* --- Ton Ayrımı --- */
.ton-secim { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ton-secim .btn { min-width: 160px; justify-content: center; }

/* --- Kararlı El --- */
.kararli-tuval {
  /* Asgari yükseklik BURADA: kısa ekranlarda 46vh çok küçülüyor ve oyun
     alanı oynanamaz hâle geliyordu. Çizim uzayı CSS kutusuyla birebir. */
  width: min(560px, 92vw); height: min(46vh, 380px); min-height: 300px; display: block;
  background: var(--surface-soft); border-radius: 14px; cursor: crosshair;
  touch-action: none;
}

/* --- Simetri Tamamlama --- */
.simetri-izgara {
  display: grid; gap: 4px; grid-template-columns: repeat(var(--kenar), 1fr);
  width: min(400px, 84vw);
}
.simetri-hucre {
  aspect-ratio: 1; border: 0; border-radius: 6px; background: var(--surface-soft);
  cursor: pointer; padding: 0;
}
.simetri-hucre.sabit { cursor: default; }
.simetri-hucre.dolu { background: var(--primary-color); }
.simetri-hucre.secili { background: #16a34a; }
.simetri-hucre.hatali { background: #dc2626; }
.simetri-ipucu { margin: 0; font-size: .84rem; color: var(--muted-color); }

/* --- Labirent --- */
.lab-izgara {
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  width: min(440px, 88vw); aspect-ratio: 1; background: var(--surface);
  border: 2px solid var(--text-color); border-radius: 4px;
}
.lab-hucre { position: relative; }
.lab-hucre.d-ust { box-shadow: inset 0 2px 0 0 var(--text-color); }
.lab-hucre.d-sag { box-shadow: inset -2px 0 0 0 var(--text-color); }
.lab-hucre.d-ust.d-sag { box-shadow: inset 0 2px 0 0 var(--text-color), inset -2px 0 0 0 var(--text-color); }
.lab-hucre.d-alt { border-bottom: 2px solid var(--text-color); }
.lab-hucre.d-sol { border-left: 2px solid var(--text-color); }
.lab-hucre.cikis { background: rgba(22, 163, 74, .28); }
.lab-hucre.oyuncu::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: #dc2626;
}
.lab-yon { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lab-yon > div { display: flex; gap: 6px; }
.lab-btn {
  width: 46px; height: 46px; border: 1px solid var(--line-color); border-radius: 11px;
  background: var(--surface); color: var(--text-color); cursor: pointer; font-size: 1rem;
}
.lab-btn:hover { background: var(--surface-soft); }

/* --- Sayı Tahmini --- */
.tahmin-aralik {
  margin: 0; font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tahmin-gecmis { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 520px; }
.tahmin-rozet {
  padding: 4px 11px; border-radius: 12px; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.tahmin-rozet.buyuk { background: #dcfce7; color: #166534; }
.tahmin-rozet.kucuk { background: #dbeafe; color: #1e40af; }

@media (max-width: 640px) {
  .arama-oge { width: 28px; height: 28px; font-size: .95rem; }
  .kararli-tuval { height: 40vh; }
}

/* --- Tam ekran filigranı ---------------------------------------------------
   Tam ekranda site başlığı ve adres çubuğu kaybolduğu için ekran görüntüsü
   ya da video kaydında siteyi gösteren hiçbir şey kalmıyordu. Filigran
   DOM'da hep duruyor, yalnızca `:fullscreen` altında görünüyor.
   `pointer-events: none` — oyun alanına tıklamayı engellememeli. */
.tamekran-marka { display: none; }

.atolye-sahne:is(:fullscreen, .tamekran-acik) .tamekran-marka {
  display: flex; align-items: center; gap: 9px;
  position: absolute; right: 20px; bottom: 18px; z-index: 20;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  pointer-events: none; user-select: none;
  backdrop-filter: blur(10px);
  font-size: .82rem; line-height: 1;
}
.atolye-sahne:is(:fullscreen, .tamekran-acik) .tamekran-marka img {
  width: 22px; height: 22px; display: block;
}
.tamekran-marka-ad { font-weight: 700; letter-spacing: .01em; }
.tamekran-marka-arac {
  padding-left: 9px; margin-left: 2px; opacity: .72;
  border-left: 1px solid currentColor;
}

/* Açık ve koyu sahnelerde okunur kalması için ton sahneye göre */
.atolye-sahne[data-tema="acik"]:is(:fullscreen, .tamekran-acik) .tamekran-marka {
  background: rgba(255, 255, 255, .82);
  color: #0f172a;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .14);
}
.atolye-sahne[data-tema="koyu"]:is(:fullscreen, .tamekran-acik) .tamekran-marka {
  background: rgba(15, 23, 42, .62);
  color: #f8fafc;
}

@media (max-width: 640px) {
  .atolye-sahne:is(:fullscreen, .tamekran-acik) .tamekran-marka {
    right: 12px; bottom: 12px; font-size: .74rem; padding: 6px 11px 6px 8px;
  }
  .tamekran-marka-arac { display: none; }
}

/* --- Koyu sahnelerde ortak baslik cubugu ---
   .eglence-cubuk acik yuzey degiskenlerini kullaniyor; koyu sahnede
   (Ne Kadar Derinde?, Cember) beyaz bir serit olarak duruyordu. */
.atolye-sahne[data-tema="koyu"] .eglence-cubuk {
  background: rgba(255, 255, 255, .06); border-bottom-color: rgba(255, 255, 255, .1);
}
.atolye-sahne[data-tema="koyu"] .eglence-cubuk h2 { color: #f8fafc; }
.atolye-sahne[data-tema="koyu"] .eglence-cubuk .atolye-tamekran {
  background: rgba(255, 255, 255, .08); color: #e2e8f0;
  border-color: rgba(255, 255, 255, .16);
}

/* --- Olcek Gezgini --- */
.olcek-sahne { padding: 0 0 22px; }
.olcek-skor {
  font-weight: 600; color: var(--muted-color); font-variant-numeric: tabular-nums;
}
.olcek-govde { padding: 22px; }
.olcek-ilerleme {
  margin: 0 0 6px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-color);
}
.olcek-soru { margin: 0 0 24px; font-size: 1.08rem; line-height: 1.55; }
.olcek-tur, .derin-tur {
  display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 12px;
  background: var(--surface-soft); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted-color); vertical-align: middle;
}
.olcek-cetvel { position: relative; padding: 0 9px; }
/* Cipalar kaydiracin ustunde duruyor; oyuncu 43 mertebelik cetvelde
   nerede oldugunu ancak bu sabit isaretlerle kestirebiliyor. */
.olcek-cipa { position: relative; height: 44px; }
.olcek-cipa span {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .66rem; color: var(--muted-color); white-space: nowrap;
}
.olcek-cipa i { width: 1px; height: 11px; background: var(--line-color); }
.olcek-kaydirac { width: 100%; accent-color: #0891b2; }
.olcek-okuma { margin: 16px 0 0; text-align: center; }
.olcek-okuma b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.olcek-okuma span { display: block; font-size: .8rem; color: var(--muted-color); }
.olcek-eylem { margin-top: 20px; text-align: center; }
.olcek-cevap { margin-top: 18px; text-align: center; }
.olcek-cevap .ikili-bitti .siralama-eylem,
.derin-cevap .ikili-bitti .siralama-eylem { justify-content: center; margin: 0; }
.hizli-not {
  margin: 0 auto 12px; max-width: 620px; font-size: .88rem; line-height: 1.6;
  color: var(--muted-color);
}

@media (max-width: 720px) {
  /* On cipa dar ekranda ust uste biniyor; bir atlayarak seyreltiliyor */
  .olcek-cipa span:nth-child(even) { display: none; }
  .olcek-govde { padding: 16px; }
}

/* --- Ne Kadar Derinde? --- */
.derin-sahne { display: flex; flex-direction: column; min-height: 62vh; color: #e2e8f0; }
.derin-skor { font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }
.derin-govde { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.derin-ilerleme {
  margin: 0; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b;
}
.derin-soru { margin: 0; font-size: 1.04rem; line-height: 1.5; color: #f1f5f9; }
.derin-sahne .derin-tur { background: rgba(255, 255, 255, .08); color: #94a3b8; }
.derin-yonerge { margin: 0; font-size: .8rem; color: #64748b; }
.derin-tuval {
  width: 100%; height: 46vh; min-height: 280px; border-radius: 12px;
  cursor: crosshair; touch-action: none; display: block;
}
.derin-tuval:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
.derin-okuma { margin: 0; text-align: center; color: #f8fafc; }
.derin-okuma b { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: #fb923c; }
.derin-eylem, .derin-cevap { text-align: center; }
.derin-cevap .hizli-not { color: #94a3b8; }
.derin-cevap .ikili-kaynaklar, .derin-cevap .ikili-kaynaklar a { color: #64748b; }
.derin-cevap .ikili-bitti p { color: #e2e8f0; }

/* --- Geniş açılır paneller ekrana göre yerleşir ---
   ÖLÇÜM: "Eğlence" paneli 3 sütuna çıkınca 940 piksel oldu ve 1280 piksellik
   ekranda 163, 1440'ta 76 piksel sağdan taşıyordu; "Kategoriler" paneli de
   1081–1137 aralığında taşıyor. Sebep basit: düğme başlığın sağında duruyor
   ve panel `left: 0` ile ona yapışık. 900 piksellik bir paneli o noktadan
   sola dayamak imkânsız.

   Çözüm panelin bağlamını değiştirmek: tetikleyiciye değil GÖRÜNÜM KUTUSUNA
   göre ortalanıyor. Başlık her koşulda 0–68 piksel arasında duruyor (sticky,
   üstünde başka öğe yok — kaydırmalı ve kaydırmasız iki durumda da ölçüldü),
   bu yüzden 80 piksellik sabit üst değer güvenli.

   Yalnızca 1081 piksel üstünde geçerli: altında `.main-nav` zaten gizli ve
   menü mobil çekmeceye devrediyor. */
@media (min-width: 1081px) {
  .mega-panel.mega-genis {
    position: fixed; top: 80px; left: 50%; right: auto;
    transform: translateX(-50%);
    animation-name: mega-in-genis;
  }
}

/* Ortalama `transform` ile yapıldığı için giriş animasyonunun da onu
   koruması gerekiyor; yoksa panel açılırken bir kare sola sıçrıyor. */
@keyframes mega-in-genis {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ======================================================== Performans Karnesi == */
.eglence-cubuk-sag { display: flex; align-items: center; gap: 12px; }
.test-oyuncu {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
  padding: 4px 10px; border-radius: 14px; font-size: .8rem; color: var(--dark-color);
  cursor: pointer; transition: var(--transition);
}
.test-oyuncu:hover { border-color: var(--primary-color); background: #fff; }
.test-oyuncu .mini-pen { font-size: .65rem; color: var(--muted-color); }

.test-karne {
  display: grid; gap: 16px; width: 100%; max-width: 640px; margin: 0 auto;
  text-align: left; animation: karne-gel .35s ease-out;
}
/* Karnenin iki yarısı. Normal görünümde ikisi de tek sütun olarak akar ve
   düzen bölünmeden önceki hâliyle aynı kalır; tam ekranda yan yana geçerler
   (bkz. "SONUÇ PANELİ TAM EKRANDA İKİ SÜTUN").                             */
.karne-ana, .karne-yan { display: grid; gap: 16px; align-content: start; min-width: 0; }
@keyframes karne-gel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.karne-ust {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.karne-tier {
  width: 84px; height: 84px; flex-shrink: 0; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tier-bg, rgba(245,158,11,0.15)); border: 2px solid var(--tier-c, #f59e0b);
  box-shadow: 0 4px 16px var(--tier-bg, rgba(245,158,11,0.25));
}
.tier-harf { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--tier-c, #f59e0b); }
.tier-ad { font-size: .65rem; font-weight: 700; color: var(--tier-c, #f59e0b); text-transform: uppercase; margin-top: 3px; }

.karne-ozet { flex: 1; min-width: 0; }
.karne-ozet .test-sonuc-baslik { font-size: 1.4rem; font-weight: 700; color: var(--dark-color); margin: 0 0 4px; }
.karne-ozet .test-sonuc-alt { font-size: .92rem; color: var(--muted-color); margin: 0; }

.karne-dilim {
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line-color);
}
.karne-dilim-baslik { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 600; margin-bottom: 8px; color: var(--dark-color); }
.karne-dilim-baslik i { color: var(--primary-color); margin-right: 4px; }
.karne-bar-ray { height: 10px; background: var(--surface-soft); border-radius: 6px; overflow: hidden; }
.karne-bar-dolu { height: 100%; border-radius: 6px; transition: width .8s cubic-bezier(0.16, 1, 0.3, 1); }
.karne-dilim-ipucu { display: block; font-size: .75rem; color: var(--muted-color); margin-top: 6px; }

.karne-tuval-sarmal {
  display: flex; justify-content: center; background: #fff; padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-color);
}
.karne-tuval { max-width: 100%; height: auto; display: block; border-radius: 8px; }

.karne-tablo {
  display: grid; gap: 6px; background: #fff; padding: 12px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-color);
}
.karne-satir { display: flex; justify-content: space-between; font-size: .86rem; padding: 4px 0; border-bottom: 1px dashed var(--line-color); }
.karne-satir:last-child { border-bottom: 0; }
.karne-sol { color: var(--muted-color); }
.karne-sag { font-weight: 600; color: var(--dark-color); }

.karne-dipnot { font-size: .8rem; color: var(--muted-color); margin: 0; line-height: 1.45; }
.karne-dipnot i { color: var(--primary-color); margin-right: 4px; }

.tus-ipucu {
  background: rgba(0, 0, 0, .15); padding: 1px 6px; border-radius: 4px;
  font-size: .72rem; margin-left: 6px; font-family: inherit;
}

/* Header Rumuz Çipi */
.btn-rumuz {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
  padding: 6px 12px; border-radius: 20px; font-size: .84rem; font-weight: 500;
  color: var(--dark-color); cursor: pointer; transition: var(--transition);
}
.btn-rumuz:hover { border-color: var(--primary-color); background: #fff; transform: translateY(-1px); }
.btn-rumuz i { color: var(--primary-color); font-size: .92rem; }
.btn-rumuz .mini-pen { font-size: .65rem; color: var(--muted-color); }

/* Sidebar Lider Tablosu */
.lider-sekmeler {
  display: flex; gap: 4px; margin-bottom: 10px; background: var(--surface-soft);
  padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--line-color);
}
.lider-tab-btn {
  flex: 1; border: 0; background: transparent; padding: 5px 2px;
  font-size: .75rem; font-weight: 600; color: var(--muted-color);
  border-radius: 6px; cursor: pointer; transition: var(--transition);
  text-align: center;
}
.lider-tab-btn:hover { color: var(--dark-color); }
.lider-tab-btn.aktif {
  background: #fff; color: var(--primary-dark);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08); font-weight: 700;
}
.lider-bos {
  text-align: center; padding: 18px 12px; font-size: .82rem; color: var(--muted-color);
  background: #fff; border-radius: var(--radius-sm); border: 1px dashed var(--line-color);
}
.lider-bos i { display: block; font-size: 1.4rem; color: #cbd5e1; margin-bottom: 6px; }

.lider-tablosu { display: grid; gap: 6px; margin-bottom: 12px; width: 100%; max-width: 100%; box-sizing: border-box; }
.lider-satir {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line-color);
  font-size: .84rem; transition: var(--transition);
  width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden;
}
.lider-satir:hover { transform: translateX(3px); }
.lider-sira { width: 22px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: .85rem; }
/* min-width: 0 Flexbox taşmalarını önler; metin sığmadığında ellipsis ile kesilir */
.lider-ad { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--dark-color); }
.lider-skor { font-weight: 700; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.lider-ben { border-color: var(--primary-color); background: rgba(0, 188, 212, 0.08); }
.lider-ben .lider-ad { color: var(--primary-dark); font-weight: 700; }
.lider-alt-bilgi { font-size: .75rem; color: var(--muted-color); text-align: center; margin-top: 6px; }
.lider-yukleniyor { font-size: .82rem; color: var(--muted-color); text-align: center; padding: 14px; }

/* Harita Sahne & Tuval Alanı */
.harita-sahne {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.harita-govde {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.2;
  max-height: min(64vh, 480px);
  min-height: 240px;
  background: #e0f2fe;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

#haritaTuval {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tam ekranda harita gövdesi ekran yüksekliğine uyum sağlar */
.atolye-sahne:is(:fullscreen, .tamekran-acik) .harita-govde {
  aspect-ratio: auto;
  max-height: none;
  height: calc(100vh - 64px);
  border-radius: 0;
}

/* Harita Başlat Merkez Overlay Butonu */
.harita-baslat-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.40);
  backdrop-filter: blur(4px);
  transition: opacity .2s ease;
}
.harita-baslat-overlay[hidden] { display: none; }

.harita-baslat-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 999px;
  border: 2px solid #00bcd4;
  background: rgba(15, 23, 42, 0.90);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0, 188, 212, 0.55), inset 0 0 12px rgba(0, 188, 212, 0.2);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.harita-baslat-btn:hover {
  transform: scale(1.06);
  background: #00bcd4;
  color: #0f172a;
  box-shadow: 0 6px 30px rgba(0, 188, 212, 0.85);
}
.harita-baslat-ipucu {
  font-size: .8rem;
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Harita Sonuç Katmanı
   KAYDIRILABİLİR: eylem düğmeleri eskiden katmanın DIŞINDA, `.harita-alt`
   çubuğundaydı. Tam ekranda gövde `calc(100vh - 64px)` olduğu için o çubuk
   ekranın altında kalıyor ve bitiş ekranında hiçbir düğmeye ulaşılamıyordu.
   Düğmeler artık katmanın içinde; katman da taşarsa kendi içinde kayıyor.  */
.harita-sonuc-katmani {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  /* `.harita-govde` dokunmatik kaydırmayı kapatıyor (tuval sürüklemesi
     için); sonuç katmanı ondan muaf olmalı. */
  touch-action: pan-y;
  background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px);
  animation: karne-gel .3s ease-out;
}
.harita-sonuc-katmani[hidden] { display: none; }
.harita-sonuc-katmani .test-karne { width: 100%; max-width: 520px; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .harita-sonuc-katmani .test-karne {
  max-width: 920px;
}
/* Eylem düğmeleri hem katmanın içinde hem alt çubukta duruyor; normal
   görünümde alt çubuktaki, tam ekranda katmandaki kopya görünür (gerekçesi
   harita.js'te `eylemDugmeleri` başında).                                  */
.karne-eylem-tamekran { display: none; }
.atolye-sahne:is(:fullscreen, .tamekran-acik) .karne-eylem-tamekran {
  display: flex; justify-content: center; margin: 0;
}

/* Harita Karadeniz Hedef Pulse Banner */
.harita-hedef-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 15; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(15, 23, 42, 0.90); backdrop-filter: blur(8px);
  border: 2px solid #00bcd4; border-radius: 30px;
  padding: 5px 16px; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.4);
  color: #fff; animation: hedef-giris .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.harita-hedef-banner[hidden] { display: none; }
.harita-hedef-banner.pulse {
  animation: hedef-pulse .45s ease-out;
}
.hedef-etiket {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #7dd3fc;
}
.hedef-il {
  font-size: 1.22rem; font-weight: 800; color: #fff;
  letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 188, 212, 0.6);
}
.hedef-kronometre {
  font-size: .82rem; font-weight: 700; color: #facc15;
  background: rgba(250, 204, 21, 0.15); padding: 2px 8px; border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.3); font-variant-numeric: tabular-nums;
}

@keyframes hedef-giris {
  from { opacity: 0; transform: translate(-50%, -10px) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes hedef-pulse {
  0% { transform: translate(-50%, 0) scale(0.92); box-shadow: 0 0 0 rgba(0, 188, 212, 0); }
  50% { transform: translate(-50%, 0) scale(1.14); box-shadow: 0 0 32px rgba(0, 188, 212, 0.85); border-color: #38bdf8; }
  100% { transform: translate(-50%, 0) scale(1); box-shadow: 0 4px 20px rgba(0, 188, 212, 0.4); border-color: #00bcd4; }
}

/* Harita Mod Seçici */
.harita-mod-sarmal {
  display: flex; justify-content: center; margin-bottom: 12px;
}
.harita-mod-secici {
  display: inline-flex; gap: 4px; background: var(--surface-soft);
  padding: 4px; border-radius: 30px; border: 1px solid var(--line-color);
}
.harita-mod-btn {
  border: 0; background: transparent; padding: 6px 16px; border-radius: 20px;
  font-size: .84rem; font-weight: 600; color: var(--muted-color);
  cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.harita-mod-btn:hover { color: var(--dark-color); }
.harita-mod-btn.aktif {
  background: #fff; color: var(--primary-dark); font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.harita-mod-btn.mod-cocuk.aktif {
  color: #db2777; border: 1px solid rgba(219, 39, 119, 0.2);
}

/* Sıcak - Soğuk Radar Banner & Işıma */
.harita-hedef-banner.sicak-soguk {
  transition: border-color .2s, box-shadow .2s;
}
.banner-ton-buz {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.45) !important;
}
.banner-ton-ilik {
  border-color: #facc15 !important;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.45) !important;
}
.banner-ton-sicak {
  border-color: #f97316 !important;
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.6) !important;
}
.banner-ton-kirmizi {
  border-color: #ef4444 !important;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.8) !important;
}

.radar-gosterge {
  font-size: .82rem; font-weight: 700; padding: 2px 10px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.radar-buz { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
.radar-ilik { background: rgba(250, 204, 21, 0.2); color: #fde047; }
.radar-sicak { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
.radar-kirmizi { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }

/* Çocuk modu yıldızları */
.yildiz-kumesi {
  font-size: 1.35rem; color: #facc15; display: inline-flex; gap: 4px; margin-top: 4px;
}

/* Harita Dokunmatik & Mobil Kaydırma Önleme */
#haritaTuval, .harita-govde, .harita-sahne {
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Mobilde Liderlik Puan Tablosunun Oyunun Hemen Altına Alınması */
@media (max-width: 860px) {
  .content-area {
    display: flex !important;
    flex-direction: column !important;
  }
  .left-content-area {
    display: flex !important;
    flex-direction: column !important;
  }
  .left-content-area > .harita-mod-sarmal { order: 1 !important; }
  .left-content-area > .atolye-sahne { order: 2 !important; }
  .right-content {
    order: 3 !important;
    margin: 16px 0 !important;
    position: static !important;
  }
  .left-content-area > .atolye-bilgi { order: 4 !important; }
  .left-content-area > *:not(.harita-mod-sarmal):not(.atolye-sahne):not(.atolye-bilgi) {
    order: 5 !important;
  }
}

/* Liderlik Tablosunda En İyi Tekil Skor (Solunda Parantez İçinde) */
.lider-skor {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  max-width: 65%;
  white-space: nowrap;
}
.lider-en-iyi {
  display: inline-block;
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted-color, #64748b);
  opacity: 0.85;
}
.lider-ana-skor {
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Harf Karıştırma (Anagram) Gelişmiş Tasarım */
.anagram-sahne-ici {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.anagram-harf-kutusu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.anagram-karisik {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 2px;
}
.anagram-harf {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 48px;
  padding: 0 10px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--primary-color, #d97706);
  border: 2px solid var(--line-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anagram-karisik.sallan .anagram-harf {
  animation: harfSalla 0.35s ease-out;
}
@keyframes harfSalla {
  0% { transform: scale(0.85) rotate(-4deg); opacity: 0.6; }
  50% { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.anagram-karistir-btn {
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-color, #64748b);
  border-color: var(--line-color, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
}
.anagram-karistir-btn:hover {
  color: var(--primary-color, #d97706);
  border-color: var(--primary-color, #d97706);
  background: rgba(217, 119, 6, 0.08);
}
.can-gosterge {
  color: #ef4444;
  letter-spacing: 2px;
}

/* Sıralamam Ne Demek? İsteğe Bağlı Liderlik Toggle */
.siralama-puan-onay {
  margin: 14px 0 10px;
  padding: 12px 14px;
  background: var(--surface-variant-color, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
}
.siralama-toggle-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.siralama-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.siralama-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 24px;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}
.siralama-toggle-switch::after {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.siralama-toggle-input:checked + .siralama-toggle-switch {
  background-color: #7c3aed;
}
.siralama-toggle-input:checked + .siralama-toggle-switch::after {
  transform: translateX(20px);
}
.siralama-toggle-yazi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.siralama-toggle-yazi strong {
  font-size: 0.92rem;
  color: var(--text-color);
}
.siralama-toggle-yazi small {
  font-size: 0.8rem;
  color: var(--muted-color);
  line-height: 1.35;
}

/* Sıralamam Ne Demek? Samimi Dürüstlük / Liderlik Uyarısı */
.siralama-samimi-uyari {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: var(--text-color);
  text-align: left;
}
.siralama-samimi-uyari i {
  color: #7c3aed;
  font-size: 1.15rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.siralama-samimi-uyari strong {
  display: block;
  font-size: 0.92rem;
  color: #7c3aed;
  margin-bottom: 3px;
}
.siralama-samimi-uyari p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-color);
  opacity: 0.9;
}

/* ==========================================================================
   FAVORİLER SİSTEMİ STİLLERİ
   ========================================================================== */

/* Header Favori Butonu ve Rozeti */
.btn-fav {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
  position: relative;
}
.btn-fav:hover {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.fav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 4px;
}
.btn-fav:hover .fav-badge {
  background: #fff;
  color: #d97706;
}

/* Kartlardaki Favori Butonu */
.tool-card, .atolye-kart {
  position: relative;
}
.card-fav-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-color, #e2e8f0);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.92rem;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.card-fav-btn i {
  color: inherit;
  transition: transform 0.15s ease;
}
.card-fav-btn:hover {
  transform: scale(1.18);
  color: #f59e0b;
  background: #fff;
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.card-fav-btn.active {
  color: #f59e0b;
  background: #fffbeb;
  border-color: #f59e0b;
}
.card-fav-btn.active i {
  color: #f59e0b;
}

/* Detay Sayfası Başlık Favori Butonu */
.tool-title-row, .atolye-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.tool-title-row h1, .atolye-title-row h1 {
  margin: 0;
}
.page-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--line-color, #e2e8f0);
  background: #fff;
  color: var(--dark-color, #1e293b);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,0.06));
  flex-shrink: 0;
}
.page-fav-btn i {
  font-size: 1.15rem;
  color: #f59e0b;
  transition: transform 0.2s ease;
}
.page-fav-btn:hover {
  border-color: #f59e0b;
  color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}
.page-fav-btn:hover i {
  transform: scale(1.2);
}
.page-fav-btn.active {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
}
.page-fav-btn.active i {
  color: #f59e0b;
}

/* Arama Modalı Favori Butonu */
.search-fav-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-color, #e2e8f0);
  background: #fff;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  z-index: 2;
}
.search-fav-btn i {
  color: inherit;
}
.search-fav-btn:hover {
  color: #f59e0b;
  border-color: #f59e0b;
  background: #fffbeb;
  transform: scale(1.18);
}
.search-fav-btn.active {
  color: #f59e0b;
  border-color: #f59e0b;
  background: #fffbeb;
}
.search-fav-btn.active i {
  color: #f59e0b;
}

/* Favoriler Sayfası Stilleri */
.fav-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.fav-tab-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--line-color, #e2e8f0);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.fav-tab-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-dark);
}
.fav-tab-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

.fav-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--line-color, #cbd5e1);
  max-width: 560px;
  margin: 30px auto 50px;
}
.fav-empty-state i.fa-star {
  font-size: 3.5rem;
  color: #cbd5e1;
  margin-bottom: 18px;
  display: inline-block;
}
.fav-empty-state h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}
.fav-empty-state p {
  color: var(--muted-color);
  margin-bottom: 24px;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ------------------------------------------- favoriler açılır menüsü (header) */

.nav-fav {
  position: relative;
}
.mega-fav-panel {
  width: min(92vw, 560px) !important;
}
.mega-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}
.mega-fav-kart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--surface-soft, #f8fafc);
  transition: var(--transition);
  position: relative;
}
.mega-fav-kart:hover {
  background: color-mix(in srgb, var(--c, #00bcd4) 12%, #fff);
  transform: translateX(2px);
}
.mega-fav-ikon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c, #00bcd4) 16%, #fff);
  color: var(--c, var(--primary-color));
  font-size: 0.88rem;
}
.mega-fav-metin {
  flex: 1;
  min-width: 0;
}
.mega-fav-metin strong {
  display: block;
  font-size: 0.86rem;
  color: var(--dark-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mega-fav-metin small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-color);
}
.mega-fav-remove {
  background: transparent;
  border: 0;
  color: #f59e0b;
  cursor: pointer;
  padding: 6px;
  font-size: 0.95rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 2;
}
.mega-fav-remove:hover {
  transform: scale(1.2);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.mega-fav-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted-color);
}
.mega-fav-empty i {
  font-size: 1.8rem;
  color: #cbd5e1;
  margin-bottom: 8px;
  display: inline-block;
}
.mega-fav-empty p {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-color);
  margin: 0 0 4px;
}
.mega-fav-empty small {
  font-size: 0.78rem;
  color: var(--muted-color);
  display: block;
}




/* ==========================================================================
   Alet Çantası — bölüm rozetleri ve İnternet Hız Testi
   ========================================================================== */

/* Bölüm ayrımı renkle de okunuyor: Eğlence mor, Alet Çantası cyan. */
.nav-btn.nav-alet i:first-child { color: #0ea5e9; }
.mobil-link.mobil-alet i:first-child { color: #0ea5e9; }
.hero-alet .hero-rozet-atolye { background: rgba(14, 165, 233, .14); color: #0369a1; }

.search-tag-alet,
.discover-card-alet .search-tag-alet {
  background: rgba(14, 165, 233, .14); color: #0369a1;
}
.search-item-icon-alet { background: rgba(14, 165, 233, .12); color: #0369a1; }

/* Veri tüketimi uyarısı sarı zeminli: bildirim değil, karar gerektiren uyarı. */
.eglence-bildirim-uyari {
  background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3;
}
.eglence-bildirim-uyari i { color: #ef6c00; }
.eglence-bildirim-uyari b { color: #5c4400; }

/* --- Hız testi --- */
.hiz-sahne { padding: 16px 16px 20px; background: var(--surface); border: 1px solid var(--line-color); }
.hiz-sunucu { font-size: .78rem; color: var(--muted-color); }

.hiz-gosterge-kart {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 8px 8px;
}
.hiz-gosterge-sarmal {
  position: relative; width: min(280px, 74vw); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
/* Yay 270 derecelik; -225 derece döndürme boşluğu alta getiriyor. */
.hiz-gosterge-svg { width: 100%; height: 100%; transform: rotate(-225deg); }
.hiz-yay-zemin { fill: none; stroke: var(--surface-soft); stroke-width: 14; stroke-linecap: round; }
.hiz-yay {
  fill: none; stroke: url(#hizMavi); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset .08s linear;
}
.hiz-gosterge-ic {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-align: center;
}
.hiz-faz {
  font-size: .68rem; font-weight: 800; letter-spacing: 1.2px;
  color: var(--muted-color);
}
.hiz-deger { font-size: clamp(2.2rem, 9vw, 3.1rem); font-weight: 800; line-height: 1.05; color: var(--text-color); }
.hiz-birim { font-size: .8rem; color: var(--muted-color); font-weight: 600; }
.hiz-ilerleme-yol {
  width: 96px; height: 4px; margin-top: 8px; border-radius: 2px;
  background: var(--surface-soft); overflow: hidden;
}
.hiz-ilerleme { height: 100%; width: 0; background: #0ea5e9; transition: width .12s linear; }

.hiz-dalga-sarmal { width: 100%; max-width: 520px; height: 56px; }
#hizDalga { display: block; width: 100%; height: 56px; }

.hiz-baslat-alan { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 14px; }
.hiz-veri-uyari {
  max-width: 560px; margin: 0; padding: 10px 14px; border-radius: 11px;
  background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3;
  font-size: .82rem; line-height: 1.5; text-align: center;
}
.hiz-veri-uyari i { color: #ef6c00; margin-right: 6px; }

.hiz-kartlar {
  display: grid; gap: 10px; padding: 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.hiz-kart {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
  border-radius: var(--border-radius); transition: var(--transition);
}
.hiz-kart.etkin { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, .12); }
.hiz-kart-ad { font-size: .76rem; font-weight: 600; color: var(--muted-color); }
.hiz-kart-ad i { margin-right: 5px; }
.hiz-kart strong { font-size: 1.5rem; font-weight: 800; color: var(--text-color); line-height: 1.15; }
.hiz-kart small { font-size: .74rem; color: var(--muted-color); }

.hiz-sonuc-alt { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.hiz-tuketim { margin: 0; font-size: .8rem; color: var(--muted-color); }
.hiz-eylem { display: flex; gap: 8px; flex-wrap: wrap; }

.hiz-gecmis { margin-top: 22px; }
.hiz-gecmis-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hiz-gecmis-baslik h3 { font-size: .95rem; font-weight: 700; }
.hiz-gecmis-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-color); font-size: .84rem;
}
.hiz-gecmis-satir:last-child { border-bottom: 0; }
.hiz-gecmis-zaman { color: var(--muted-color); font-variant-numeric: tabular-nums; }
.hiz-gecmis-degerler { display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.hiz-gecmis-degerler i { color: var(--muted-color); margin-right: 4px; }

@media (max-width: 480px) {
  .hiz-gosterge-sarmal { width: min(230px, 78vw); }
  .hiz-kart strong { font-size: 1.3rem; }
}

/* ==========================================================================
   Bebek Tuş Oyun Alanı
   Kaynak araç Tailwind CDN + Google Fonts ile geliyordu; ikisi de siteye
   girmedi. Renkler ve ölçüler tema değişkenlerine bağlandı, yazı tipi
   sitenin kendi alt kümesinden geliyor.
   ========================================================================== */

.bebek-sahne {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-color);
  min-height: min(70vh, 560px);
  display: flex; align-items: center; justify-content: center;
}
.bebek-sahne:focus { outline: none; }

/* --- Ebeveyn giriş ekranı --- */
.bebek-giris {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 32px 24px; text-align: center; max-width: 620px;
}
.bebek-giris-ikon { font-size: 3.4rem; line-height: 1; }
.bebek-giris h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-color); }
.bebek-giris-aciklama { color: var(--muted-color); font-size: .95rem; max-width: 44ch; }
.bebek-giris-not {
  font-size: .8rem; line-height: 1.55; color: var(--muted-color);
  background: var(--surface-soft); border: 1px solid var(--line-color);
  border-radius: 11px; padding: 10px 14px; max-width: 52ch;
}
.bebek-giris-not b { color: var(--text-color); }

/* --- Oyun alanı --- */
/* Renk döngüsü çocuk için tempo veriyor; 16 sn yeterince yavaş ki
   titreşim/uyarıcı etkisi olmasın. */
@keyframes bebekZeminDonusu {
  0%   { background-color: #fef3c7; }
  25%  { background-color: #d1fae5; }
  50%  { background-color: #dbeafe; }
  75%  { background-color: #fce7f3; }
  100% { background-color: #ffedd5; }
}
.bebek-oyun {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: bebekZeminDonusu 16s infinite alternate ease-in-out;
}
.bebek-oyun[hidden] { display: none; }

/* Hareket duyarlılığı olan kullanıcıda zemin sabit kalsın. */
@media (prefers-reduced-motion: reduce) {
  .bebek-oyun { animation: none; background-color: #dbeafe; }
  .bebek-susleme { animation: none; }
}

@keyframes bebekSuzul {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(8deg); }
}
.bebek-suslemeler { position: absolute; inset: 0; pointer-events: none; }
.bebek-susleme {
  position: absolute; font-size: 3.6rem; opacity: .3;
  animation: bebekSuzul 6s ease-in-out infinite;
}
.bebek-susleme:nth-child(1) { top: 10%; left: 8%; }
.bebek-susleme:nth-child(2) { top: 22%; right: 10%; animation-delay: -2s; }
.bebek-susleme:nth-child(3) { bottom: 16%; left: 12%; animation-delay: -4s; }
.bebek-susleme:nth-child(4) { bottom: 10%; right: 9%; animation-delay: -1s; }

.bebek-kart {
  position: relative; z-index: 2;
  background: rgba(255, 255, 255, .88);
  border: 4px solid #fff; border-radius: 28px;
  padding: 28px 40px; text-align: center; min-width: min(320px, 80vw);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  transition: transform .15s cubic-bezier(.175, .885, .32, 1.275);
}
.bebek-kart.zipla { transform: scale(1.12) rotate(2deg); }
.bebek-emoji { font-size: clamp(4rem, 14vw, 7rem); line-height: 1.1; }
.bebek-harf {
  font-size: clamp(2.4rem, 9vw, 4.4rem); font-weight: 900;
  color: #7c3aed; text-transform: uppercase; letter-spacing: .04em;
}
.bebek-alt { margin-top: 6px; font-size: .95rem; font-weight: 600; color: #6b7280; }

/* --- Patlayan emojiler --- */
@keyframes bebekPatla {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(-15deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%, -190px) scale(1) rotate(0deg); opacity: 0; }
}
.bebek-parcaciklar { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.bebek-parcacik {
  position: absolute; font-size: 2.6rem; pointer-events: none;
  animation: bebekPatla 1.2s cubic-bezier(.175, .885, .32, 1.275) forwards;
}

/* --- Üst kontroller --- */
.bebek-ust {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; gap: 8px; align-items: center;
}
.bebek-mini {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); font-size: 1.1rem; line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* Basılı tutmalı çıkış: dolgu ilerledikçe düğmeyi soldan sağa boyar. */
.bebek-cikis {
  position: relative; overflow: hidden; cursor: pointer;
  border: 0; border-radius: 999px; padding: 10px 20px;
  background: rgba(255, 255, 255, .92); color: #b91c1c;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  touch-action: none;   /* basılı tutarken sayfa kaydırmasın */
}
.bebek-cikis-yazi { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; }
.bebek-cikis-dolgu {
  position: absolute; inset: 0; width: 0; z-index: 1;
  background: rgba(239, 68, 68, .28);
}
.bebek-cikis-dolgu.doluyor { width: 100%; transition: width 1.5s linear; }

.bebek-ipucu {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5; margin: 0; font-size: .78rem; font-weight: 600; color: #4b5563;
  background: rgba(255, 255, 255, .7); padding: 6px 14px; border-radius: 999px;
}

/* --- Duraklatma / geri dönüş katmanı --- */
/* Tam ekran dışarıdan kapatıldığında beliriyor. Tüm alanı kaplaması şart:
   altındaki oyun alanına kazara dokunuş geri dönüşü kaçırmasın. */
.bebek-geri-don {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .78); backdrop-filter: blur(3px);
}
.bebek-geri-don[hidden] { display: none; }
.bebek-geri-ic {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 28px 32px; text-align: center; max-width: 380px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.bebek-geri-ikon { font-size: 2.6rem; line-height: 1; }
.bebek-geri-ic h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-color); }
.bebek-geri-ic p { font-size: .88rem; color: var(--muted-color); }

@media (max-width: 560px) {
  .bebek-kart { padding: 20px 24px; border-radius: 22px; }
  .bebek-susleme { font-size: 2.4rem; }
  .bebek-parcacik { font-size: 2rem; }
  .bebek-ipucu { font-size: .72rem; }
}

/* ==========================================================================
   Metin ve Sohbet — Kelime Bulutu Oluşturucu + WhatsApp Sohbet Analizi
   İki araç da kullanıcının KENDİ metnini alıyor; gizlilik bildirimi diğer
   araçlardaki nötr bilgi kutusundan ayrılsın diye yeşil zeminde duruyor.
   ========================================================================== */

.eglence-bildirim-guvenli {
  background: #ecfdf5; color: #14532d; border: 1px solid #a7f3d0;
}
.eglence-bildirim-guvenli i { color: #059669; }
.eglence-bildirim-guvenli b { color: #064e3b; }

/* --- ortak: dosya bırakma alanı --- */
.bulut-dosya, .wa-yukle, .gorsel-yukle {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 20px; text-align: center;
  border: 2px dashed var(--line-color); border-radius: var(--radius-lg);
  background: var(--surface-soft); transition: border-color .2s ease, background .2s ease;
}
.bulut-dosya.uzerinde, .wa-yukle.uzerinde, .gorsel-yukle.uzerinde {
  border-color: var(--primary-color); background: rgba(0, 188, 212, .07);
}
.bulut-dosya > i, .wa-yukle > i, .gorsel-yukle > i { font-size: 1.9rem; color: var(--primary-color); }
.bulut-dosya p, .wa-yukle p, .gorsel-yukle p { font-size: .9rem; line-height: 1.5; }
.bulut-dosya small, .wa-yukle small, .gorsel-yukle small { color: var(--muted-color); font-size: .76rem; }

/* --- Kelime Bulutu --- */
.bulut-sahne { padding: 0 0 22px; }
.bulut-giris, .bulut-ayarlar, .bulut-durum, .bulut-sonuc { margin: 16px 22px 0; }
.bulut-giris { display: flex; flex-direction: column; gap: 12px; }
.bulut-etiket { font-size: .86rem; font-weight: 600; }
.bulut-giris textarea {
  width: 100%; resize: vertical; min-height: 130px;
  padding: 12px 14px; border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color); font: inherit; font-size: .9rem;
  line-height: 1.55;
}
.bulut-giris textarea:focus { border-color: var(--primary-color); outline: none; }
.bulut-eylem-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.bulut-sayac { margin-left: auto; font-size: .78rem; color: var(--muted-color); font-variant-numeric: tabular-nums; }

.bulut-ayarlar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 14px 16px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.bulut-ayarlar[hidden] { display: none; }
.bulut-ayar { display: flex; flex-direction: column; gap: 4px; }
.bulut-ayar label { font-size: .74rem; font-weight: 600; color: var(--muted-color); }
.bulut-ayar select {
  padding: 7px 10px; border: 1px solid var(--line-color); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-color); font: inherit; font-size: .84rem;
}
.bulut-onay { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }

.bulut-durum { padding: 11px 14px; border-radius: var(--border-radius); font-size: .83rem; line-height: 1.5; }
.bulut-durum[hidden] { display: none; }
.bulut-durum-bilgi { background: var(--surface-soft); color: var(--muted-color); }
.bulut-durum-uyari { background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3; }

.bulut-tuval-kutu, .wa-bulut-kutu {
  border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--line-color);
}
/* Saydam zeminde damalı arka plan: kullanıcı PNG dosyasının saydam olacağını
   çizim alanına bakarak anlasın. */
.bulut-tuval-kutu.saydam {
  background-image:
    linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%),
    linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.bulut-tuval { display: block; width: 100%; height: auto; }

.bulut-ozet {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.bulut-kutu, .wa-kutu {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-radius: var(--border-radius); background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.bulut-kutu-deger, .wa-kutu-deger {
  font-size: 1.1rem; font-weight: 800; color: var(--text-color); font-variant-numeric: tabular-nums;
}
.bulut-kutu-etiket, .wa-kutu-etiket { font-size: .74rem; color: var(--muted-color); }

.bulut-tablo-kutu { margin-top: 16px; }
.bulut-tablo-kutu summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: 6px 0; }
.bulut-tablo-sar { overflow-x: auto; contain: inline-size; }
.bulut-tablo { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 8px; }
.bulut-tablo th, .bulut-tablo td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line-color); }
.bulut-tablo th { font-size: .74rem; color: var(--muted-color); font-weight: 600; }
.bulut-tablo td:nth-child(3) { font-variant-numeric: tabular-nums; }
.bulut-tablo td:last-child { width: 34%; }
.bulut-tablo small { color: var(--muted-color); }
.bulut-cubuk {
  display: block; height: 8px; border-radius: 4px; min-width: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* --- WhatsApp Sohbet Analizi --- */
.wa-sahne { padding: 0 0 22px; }
.wa-gizlilik, .wa-yukle, .wa-nasil, .wa-ilerleme, .wa-durum, .wa-sonuc { margin: 16px 22px 0; }

.wa-gizlilik {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--border-radius);
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #14532d;
  font-size: .84rem; line-height: 1.55;
}
.wa-gizlilik i { color: #059669; font-size: 1.05rem; margin-top: 2px; }
.wa-gizlilik b { color: #064e3b; }

.wa-yukle-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.wa-nasil {
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); overflow: hidden;
}
.wa-nasil summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .88rem; }
.wa-nasil summary i { color: var(--primary-color); margin-right: 7px; }
.wa-nasil-ic { padding: 0 16px 14px; font-size: .85rem; line-height: 1.6; color: var(--muted-color); }
.wa-nasil-ic ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 7px; }
.wa-nasil-ic b { color: var(--text-color); }
.wa-nasil-ic code {
  background: var(--surface-soft); padding: 1px 5px; border-radius: 5px; font-size: .92em;
}

.wa-ilerleme[hidden], .wa-durum[hidden], .wa-sonuc[hidden] { display: none; }
.wa-ilerleme-cubuk {
  height: 8px; border-radius: 4px; background: var(--surface-soft); overflow: hidden;
}
.wa-ilerleme-cubuk span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width .25s ease;
}
.wa-ilerleme p { margin-top: 7px; font-size: .8rem; color: var(--muted-color); }

.wa-durum { padding: 12px 15px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55; }
.wa-durum-uyari { background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3; }

.wa-not, .wa-kapsam, .wa-aciklama, .wa-yontem {
  font-size: .85rem; line-height: 1.6; color: var(--muted-color);
}
.wa-kapsam { margin-bottom: 4px; }
.wa-not {
  padding: 11px 14px; border-radius: var(--border-radius);
  background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3; margin-bottom: 12px;
}
.wa-yontem {
  margin-top: 20px; padding: 13px 16px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color); font-size: .82rem;
}
.wa-yontem b { color: var(--text-color); }

.wa-bolum-baslik { margin: 26px 0 10px; }
.wa-bolum-baslik h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 9px; }
.wa-bolum-baslik h3 i { color: var(--primary-color); }

.wa-kutular {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.wa-kutu { position: relative; }
.wa-kutu > i { position: absolute; top: 12px; right: 13px; color: var(--line-color); font-size: 1rem; }

.wa-kisiler { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wa-kisi {
  padding: 15px 16px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-color);
  border-top: 3px solid var(--c, var(--primary-color));
}
.wa-kisi header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wa-kisi-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.wa-kisi h4 { font-size: .96rem; flex: 1; overflow-wrap: anywhere; }
.wa-kisi-pay { font-size: .95rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.wa-oran { height: 7px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; }
.wa-oran span { display: block; height: 100%; background: var(--c); }

.wa-kisi-veri {
  display: grid; gap: 6px 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.wa-kisi-veri > div { display: flex; flex-direction: column; }
.wa-kisi-veri dt { font-size: .71rem; color: var(--muted-color); }
.wa-kisi-veri dd { font-size: .89rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.wa-kisi-ton { margin-top: 12px; font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.wa-kisi-ton small { font-weight: 400; color: var(--muted-color); font-size: .72rem; }
.wa-kisi-emoji { margin-top: 8px; font-size: 1.3rem; letter-spacing: 4px; }
.wa-kisi-ozgun { margin-top: 8px; font-size: .78rem; color: var(--muted-color); line-height: 1.7; }
.wa-kisi-ozgun b { color: var(--text-color); font-size: .76rem; }
.wa-kisi-ozgun em {
  font-style: normal; background: var(--surface-soft); border: 1px solid var(--line-color);
  padding: 2px 8px; border-radius: 11px; display: inline-block; margin: 2px 2px 0 0;
}

.wa-grafik { margin-top: 20px; }
.wa-grafik h4 { font-size: .84rem; color: var(--muted-color); margin-bottom: 9px; font-weight: 600; }

.wa-saat, .wa-aylik {
  display: flex; align-items: flex-end; gap: 3px; height: 128px;
  padding: 8px 10px 0; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.wa-saat-sutun, .wa-ay-sutun {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; min-width: 0;
}
.wa-saat-sutun > span, .wa-ay-sutun > span {
  width: 100%; border-radius: 3px 3px 0 0; background: var(--primary-color); min-height: 2px;
}
.wa-ay-sutun > span { background: var(--secondary-color); }
.wa-saat-sutun small, .wa-ay-sutun small {
  font-size: .6rem; color: var(--muted-color); margin-top: 4px; line-height: 1.15;
  text-align: center; white-space: nowrap;
}
/* Aylık seri yatay kayar ama dikey kaymamalı: 150px yükseklikte beliren
   dikey kaydırma çubuğu sütunların üstünü kırpıyordu. Az sayıda ay varsa
   sütunlar tuvali kaplamasın diye genişlik de sınırlı. */
/* KAYDIRMA KABI KENDİNİ SINIRLAMALI.
   `overflow-x:auto` tek başına yetmiyor: içerideki geniş içerik, ata esnek
   ögenin otomatik en küçük boyutunu (min-width:auto) büyütüyor ve ARAÇ
   SAYFASININ TAMAMI ekrandan taşıyor. Beş yıllık bir sohbette 58 aylık sütun
   × 26px = 1701px oluyordu ve 360px ekranda sayfa 1733px genişliğe çıkıp
   sağdan kırpılıyordu (html üzerinde overflow-x:clip olduğu için kullanıcı
   kaydıramıyor bile). `contain:inline-size` kabın genişliğini içeriğinden
   bağımsız kılıyor; şerit kendi içinde kayıyor, sayfa sabit kalıyor. */
.wa-aylik { height: 150px; overflow-x: auto; overflow-y: hidden; contain: inline-size; }
.wa-ay-sutun { min-width: 26px; max-width: 78px; }

.wa-gunler { display: grid; gap: 6px; }
.wa-gun-satir { display: grid; grid-template-columns: 38px 1fr 54px; align-items: center; gap: 9px; }
.wa-gun-ad { font-size: .78rem; color: var(--muted-color); }
.wa-gun-cubuk { height: 14px; border-radius: 7px; background: var(--surface-soft); overflow: hidden; }
.wa-gun-cubuk i { display: block; height: 100%; background: var(--primary-color); border-radius: 7px; }
.wa-gun-deger { font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }

.wa-isi-sar { overflow-x: auto; overflow-y: hidden; contain: inline-size; }
/* Sabit yerleşim, yatay kaydırmaya YEĞLENDİ: min-width taşıyan bir tablo,
   `overflow-x:auto` bir sarmalayıcının içinde olsa bile ata esnek kutunun
   en küçük içerik genişliğini büyütüyor ve mobilde araç sahnesinin tamamını
   ekrandan taşırıyordu. 24 sütun paylaşınca hücre küçülüyor ama ısı
   haritasında hücrenin içinde metin yok — okunurluk kaybı sıfır. */
.wa-isi { border-collapse: collapse; width: 100%; table-layout: fixed; }
.wa-isi thead th:first-child, .wa-isi tbody th { width: 34px; }
.wa-isi th {
  font-size: .62rem; color: var(--muted-color); font-weight: 500; padding: 2px;
  text-align: center;
}
.wa-isi tbody th { text-align: right; padding-right: 7px; }
/* --y 0-1 arası yoğunluk; renk tek tonun saydamlığıyla veriliyor ki ara
   değerler de birbirinden ayırt edilebilsin. */
.wa-isi td {
  height: 17px; border-radius: 3px; border: 1px solid var(--surface);
  background: rgba(0, 188, 212, calc(.08 + var(--y, 0) * .92));
}
.wa-isi-anahtar {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  font-size: .7rem; color: var(--muted-color);
}
.wa-isi-anahtar i {
  flex: 1; max-width: 160px; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0, 188, 212, .08), rgba(0, 188, 212, 1));
}

.wa-emoji-izgara { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.wa-emoji-kart {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 8px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.wa-emoji-simge { font-size: 1.7rem; line-height: 1.1; }
.wa-emoji-adet { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-emoji-cubuk { width: 100%; height: 5px; border-radius: 3px; background: var(--line-color); overflow: hidden; }
.wa-emoji-cubuk i { display: block; height: 100%; background: var(--primary-color); }

.wa-sessizlik {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 20px;
  padding: 15px 17px; border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.wa-sessizlik > i { font-size: 1.4rem; color: var(--warn); margin-top: 3px; }
.wa-sessizlik b { font-size: .95rem; }
.wa-sessizlik p { font-size: .84rem; color: var(--muted-color); line-height: 1.55; margin-top: 3px; }

@media (max-width: 640px) {
  .bulut-giris, .bulut-ayarlar, .bulut-durum, .bulut-sonuc,
  .wa-gizlilik, .wa-yukle, .wa-nasil, .wa-ilerleme, .wa-durum, .wa-sonuc {
    margin-left: 15px; margin-right: 15px;
  }
  .bulut-sayac { margin-left: 0; width: 100%; }
  .bulut-eylem-satir .btn { flex: 1 1 46%; justify-content: center; }
  .wa-yukle-dugmeler .btn { flex: 1 1 100%; justify-content: center; }
  .wa-kisiler { grid-template-columns: 1fr; }
  .wa-saat { height: 104px; }
  /* Dar ekranda saat sütunu ~12px kalıyor; iki haneli etiket taşmasın. */
  .wa-isi thead th { font-size: .52rem; }
  .wa-isi td { height: 14px; }
}

/* --- WhatsApp Sohbet Analizi: Çift Uyum Puanı ve sıralama ---------------- */

.wa-uyum {
  margin-top: 14px; padding: 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-color);
}
.wa-uyum-ust { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* Halka bir SVG değil conic-gradient: tek özellikle animasyonsuz çiziliyor ve
   --y değişkeni doğrudan puan. İç daire zemin rengiyle deliniyor. */
.wa-uyum-halka {
  position: relative; flex: 0 0 auto;
  width: 126px; height: 126px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background:
    radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%),
    conic-gradient(var(--c, #0891b2) calc(var(--y, 0) * 1%), var(--surface-soft) 0);
}
.wa-uyum-sayi {
  display: block; font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--c, #0891b2); font-variant-numeric: tabular-nums;
}
.wa-uyum-yuzde { display: block; font-size: .7rem; color: var(--muted-color); margin-top: 2px; }

.wa-uyum-metin { flex: 1 1 260px; min-width: 0; }
.wa-uyum-metin > strong { font-size: 1.15rem; display: block; margin-bottom: 5px; }
.wa-uyum-metin p { font-size: .86rem; color: var(--muted-color); line-height: 1.55; }
.wa-uyum-uyari {
  margin-top: 9px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-soft); font-size: .78rem !important; line-height: 1.55;
}
.wa-uyum-uyari i { color: var(--primary-color); margin-right: 5px; }
.wa-uyum-uyari b { color: var(--text-color); }

.wa-uyum-bilesenler {
  display: grid; gap: 12px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-color);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.wa-bilesen-ust { display: flex; align-items: baseline; gap: 7px; }
.wa-bilesen-ad { font-size: .86rem; font-weight: 600; }
.wa-bilesen-agirlik {
  font-size: .68rem; color: var(--muted-color); padding: 1px 6px;
  border-radius: 9px; background: var(--surface-soft);
}
.wa-bilesen-puan {
  margin-left: auto; font-size: .95rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wa-bilesen-cubuk {
  display: block; height: 7px; border-radius: 4px; margin: 6px 0 5px;
  background: var(--surface-soft); overflow: hidden;
}
.wa-bilesen-cubuk i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.wa-bilesen small { font-size: .73rem; color: var(--muted-color); line-height: 1.45; }

.wa-uyum-yok {
  margin-top: 12px; padding: 13px 15px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
  font-size: .85rem; line-height: 1.6; color: var(--muted-color);
}
.wa-uyum-yok i { color: var(--primary-color); margin-right: 6px; }
.wa-uyum-yok b { color: var(--text-color); }

/* --- yarışma bloğu --- */

.wa-yaris {
  margin-top: 12px; padding: 18px; border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.wa-yaris-giris { font-size: .85rem; line-height: 1.6; color: var(--muted-color); }
.wa-yaris-giris b { color: var(--text-color); }

.wa-cift-ad {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 14px;
}
.wa-cift-ad input {
  width: 130px; text-align: center; padding: 9px 10px;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color); font: inherit;
  font-size: .95rem; font-weight: 600;
}
.wa-cift-ad input:focus { border-color: var(--primary-color); outline: none; }

.wa-ayraclar { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.wa-ayrac {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-color); background: var(--surface);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.wa-ayrac:hover { transform: translateY(-2px); }
.wa-ayrac.aktif {
  border-color: var(--primary-color); background: rgba(0, 188, 212, .12);
  box-shadow: 0 0 0 2px rgba(0, 188, 212, .18);
}

.wa-onizleme {
  margin-top: 12px; text-align: center; font-size: .85rem; color: var(--muted-color);
}
.wa-onizleme b {
  color: var(--text-color); font-size: 1rem;
  padding: 3px 10px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line-color);
}
.wa-onizleme b.gecersiz { color: var(--danger); border-color: var(--danger); }

.wa-yaris-uyari {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--border-radius);
  background: #fff8e1; color: #7a5b00; border: 1px solid #ffe0a3;
  font-size: .79rem; line-height: 1.55;
}
.wa-yaris-uyari i { color: #ef6c00; margin-right: 5px; }
.wa-yaris-uyari b { color: #5c4400; }

.wa-yaris .siralama-eylem { margin-left: 0; margin-right: 0; justify-content: center; }

.wa-yaris-durum {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--border-radius);
  font-size: .83rem; line-height: 1.55; background: var(--surface);
  border: 1px solid var(--line-color); color: var(--muted-color);
}
.wa-yaris-durum[hidden] { display: none; }
.wa-yaris-durum b { color: var(--text-color); }
.wa-yaris-durum.basarili { background: #ecfdf5; border-color: #a7f3d0; color: #14532d; }
.wa-yaris-durum.basarili i, .wa-yaris-durum.basarili b { color: #047857; }
.wa-yaris-durum.uyari { background: #fff8e1; border-color: #ffe0a3; color: #7a5b00; }
.wa-yaris-durum.uyari i, .wa-yaris-durum.uyari b { color: #b45309; }

.wa-liderler { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-color); }
.wa-liderler h4 { font-size: .82rem; color: var(--muted-color); margin-bottom: 9px; font-weight: 600; }

@media (max-width: 640px) {
  .wa-uyum, .wa-yaris { padding: 14px; }
  .wa-uyum-ust { justify-content: center; text-align: center; }
  .wa-uyum-metin { text-align: left; }
  .wa-uyum-bilesenler { grid-template-columns: 1fr; }
  .wa-cift-ad input { width: 100%; max-width: 260px; }
}

/* --- WhatsApp Sohbet Analizi: mahremiyet ayarlı paylaşım paneli ---------- */

.bulut-dosya-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.wa-paylas {
  display: grid; gap: 18px; margin-top: 14px;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 340px);
  align-items: start;
}
.wa-paylas-ayar { display: grid; gap: 12px; }

.wa-alan {
  border: 1px solid var(--line-color); border-radius: var(--radius-lg);
  background: var(--surface); padding: 14px 16px 12px;
}
.wa-alan legend {
  font-size: .8rem; font-weight: 700; color: var(--text-color);
  padding: 0 6px; display: flex; align-items: center; gap: 7px;
}
.wa-alan legend i { color: var(--primary-color); }

.wa-secim {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 4px; cursor: pointer; font-size: .87rem; line-height: 1.4;
  border-radius: var(--radius-sm);
}
.wa-secim:hover { background: var(--surface-soft); }
.wa-secim input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--primary-color); }
.wa-secim small { display: block; font-size: .73rem; color: var(--muted-color); }
.wa-secim.pasif { opacity: .5; cursor: default; }
.wa-secim.pasif:hover { background: none; }
/* Kelime bulutu gerçek yazışma kelimelerini gösteriyor; seçeneğin yanında bunu
   söylemek, kutucuğu işaretlemeden önce okunması gereken tek uyarı. */
.wa-secim small.wa-dikkat { color: #b45309; font-weight: 600; }

.wa-takma { display: flex; gap: 8px; margin: 8px 0 2px; }
.wa-takma[hidden] { display: none; }
.wa-takma input {
  flex: 1; min-width: 0; padding: 8px 10px; font: inherit; font-size: .86rem;
  border: 1px solid var(--line-color); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-color);
}
.wa-takma input:focus { border-color: var(--primary-color); outline: none; }

.wa-paylas-onizleme { display: grid; gap: 10px; position: sticky; top: 84px; }
.wa-kart-cerceve {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-color); box-shadow: var(--box-shadow);
  background: #0f172a;
}
.wa-kart-cerceve canvas { display: block; width: 100%; height: auto; }
.wa-paylas-onizleme .siralama-eylem { margin-left: 0; margin-right: 0; }
.wa-paylas-not { font-size: .74rem; color: var(--muted-color); text-align: center; }

@media (max-width: 860px) {
  .wa-paylas { grid-template-columns: 1fr; }
  /* Dar ekranda önizleme ÜSTE alınıyor: ayarları değiştiren kişi sonucu
     görmek için sayfayı aşağı kaydırmak zorunda kalmasın. */
  .wa-paylas-onizleme { order: -1; position: static; }
  .wa-kart-cerceve { max-width: 340px; margin: 0 auto; }
}

/* --- Çılgın Şifre Oyunu -------------------------------------------------- */

.sifre-sahne { padding: 0 0 22px; }
.sifre-govde { padding: 0 22px; }

.sifre-giris-not {
  margin-top: 16px; font-size: .86rem; line-height: 1.6; color: var(--muted-color);
}
.sifre-giris-not b { color: var(--text-color); }

.sifre-kutu { margin-top: 14px; }
.sifre-etiket { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.sifre-kutu textarea {
  width: 100%; resize: vertical; min-height: 84px;
  padding: 12px 14px; border: 2px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color);
  /* Şifre karakter karakter okunuyor: eş genişlikli yazı tipi, "l" ile "1" ya
     da "O" ile "0" karışmasın diye. */
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 1rem; line-height: 1.6; word-break: break-all;
}
.sifre-kutu textarea:focus { border-color: var(--primary-color); outline: none; }
.sifre-olcu {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: .78rem; color: var(--muted-color);
  font-variant-numeric: tabular-nums;
}
.sifre-olcu-eylem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* "Benden bu kadar": oyunun bitişi olmadığı için kapanış anını oyuncu
   seçiyor. Skoru aşana kadar kapalı duruyor — basınca hiçbir şey
   değiştirmeyen bir düğme, kapalı düğmeden kötü. */
.sifre-olcu-eylem .js-kaydet:disabled { opacity: .45; cursor: default; }
/* Kaydettikten sonra sıralamaya bakış yönlendirilsin */
.sifre-eklenti-vurgu .sonuc-lider {
  box-shadow: 0 0 0 2px var(--primary-color);
  transition: box-shadow .3s ease;
}

.sifre-tabela {
  display: grid; gap: 9px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.sifre-tabela-oge {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  border-radius: var(--border-radius); background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.sifre-tabela-deger {
  font-size: 1.25rem; font-weight: 800; color: var(--text-color);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sifre-tabela-etiket { font-size: .72rem; color: var(--muted-color); }
.sifre-tabela-sonsuz .sifre-tabela-deger { color: #7c3aed; }

.sifre-sonsuz-bildirim {
  margin: 16px 0 12px; padding: 12px 15px; border-radius: var(--border-radius);
  background: #f5f3ff; border: 1px solid #ddd6fe; color: #4c1d95;
  font-size: .84rem; line-height: 1.55;
}
.sifre-sonsuz-bildirim i { color: #7c3aed; margin-right: 6px; }

.sifre-kurallar { margin-top: 16px; display: grid; gap: 8px; }

.sifre-kural {
  display: grid; grid-template-columns: 30px 1fr 20px; gap: 10px;
  align-items: start; padding: 12px 14px; border-radius: var(--border-radius);
  border: 1px solid var(--line-color); background: var(--surface);
}
.sifre-kural.kaldi {
  border-color: #fecaca; background: #fef2f2;
  /* Sıradaki kural hep en üstte ve dikkat çekici olmalı: oyuncunun tek işi
     kırmızı olanı yeşile çevirmek. */
  box-shadow: 0 2px 10px rgba(220, 38, 38, .07);
}
.sifre-kural.gecti { border-color: #bbf7d0; background: #f0fdf4; opacity: .8; }

.sifre-kural-no {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sifre-kural.kaldi .sifre-kural-no { background: #fee2e2; color: #b91c1c; }
.sifre-kural.gecti .sifre-kural-no { background: #dcfce7; color: #15803d; }

.sifre-kural-govde { display: grid; gap: 5px; min-width: 0; }
.sifre-kural-metin { font-size: .89rem; line-height: 1.5; overflow-wrap: anywhere; }
.sifre-kural.gecti .sifre-kural-metin { color: var(--muted-color); }
.sifre-kural-durum {
  font-size: .76rem; font-weight: 700; color: #b91c1c;
  font-variant-numeric: tabular-nums;
}
.sifre-kural-ipucu { font-size: .76rem; color: var(--muted-color); font-style: italic; }

.sifre-kural > i { font-size: 1rem; margin-top: 6px; }
.sifre-kural.kaldi > i { color: var(--danger); }
.sifre-kural.gecti > i { color: var(--success); }

/* Jetonlar mobil için: emoji ve özel karakteri klavyeden bulmak zor, oysa
   bulmacanın zorluğu onlara ERİŞMEK değil hepsini aynı anda tutturmak. */
.sifre-kural-jeton { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sifre-kural-jeton button {
  min-width: 34px; height: 34px; padding: 0 8px; cursor: pointer;
  border: 1px solid var(--line-color); border-radius: 9px; background: var(--surface);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: transform .12s ease, border-color .12s ease;
}
.sifre-kural-jeton button:hover { transform: translateY(-2px); border-color: var(--primary-color); }

.sifre-gecenler-baslik {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-color);
  font-size: .78rem; font-weight: 600; color: var(--muted-color);
}

@media (max-width: 640px) {
  .sifre-govde { padding: 0 15px; }
  .sifre-kutu textarea { font-size: .95rem; min-height: 64px; }
  .sifre-kural { grid-template-columns: 26px 1fr 18px; padding: 10px 12px; gap: 8px; }
  .sifre-kural-no { width: 26px; height: 26px; font-size: .72rem; }

  /* MOBİL KLAVYE KURALLARI KAPATIYORDU.
     812 piksellik ekranda klavye ~336 piksel yiyor, geriye 476 kalıyor.
     Girdi ile kuralların arasında 230 piksellik ikincil alan vardı (iki
     satıra sarmalanan sayaç/düğme satırı + iki satıra yayılan dört kutuluk
     tabela) ve bu, kalan boşluğun yarısını götürüp kuralların TAMAMINI
     klavyenin altına itiyordu. Oysa oyuncunun yazarken bakması gereken tek
     şey kurallar; sayaç ve tabela referans bilgi.

     Tabela dört kutuyu tek satıra alıyor, sayaç satırı sarmalanmıyor.
     Ölçüldü: ikisi birden ~150 piksel geri kazandırıyor.                   */
  .sifre-olcu { gap: 6px; }
  .sifre-olcu-eylem { gap: 6px; flex-wrap: nowrap; }
  .sifre-olcu-eylem .btn {
    padding: 6px 9px; font-size: .73rem; white-space: nowrap;
  }
  .sifre-tabela { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
  .sifre-tabela-oge {
    padding: 7px 6px; gap: 1px; align-items: center; text-align: center;
  }
  .sifre-tabela-deger { font-size: 1rem; }
  .sifre-tabela-etiket { font-size: .61rem; line-height: 1.25; }
  .sifre-kurallar { margin-top: 12px; }
}

/* --- Zaman Algısı -------------------------------------------------------- */

.zaman-alan {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 18px 32px; text-align: center;
}
.zaman-hedef { font-size: 1.05rem; }
.zaman-hedef b { font-size: 1.6rem; color: var(--primary-color); }
.zaman-sayac {
  font-size: clamp(3rem, 14vw, 5.4rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text-color);
  min-height: 1em;
}
/* Sayaç kapandığında sayı değil soru işareti kalıyor; renk de düşüyor ki
   "artık buraya bakma" mesajı net olsun. */
.zaman-sayac.gizli { color: var(--line-color); }
.zaman-not { font-size: .84rem; color: var(--muted-color); max-width: 34ch; line-height: 1.55; }
.zaman-not b { color: var(--text-color); }

/* --- Şifre Kırma --------------------------------------------------------- */

.kirma-alan { padding: 18px; display: grid; gap: 14px; }

/* Maske oyunun ana ekranı: çözülen parçalar açık yazıyla, çözülmeyenler blok
   olarak duruyor. Eş genişlikli yazı tipi şart — blok sayısı gözle sayılabilsin. */
.kirma-maske {
  text-align: center; font-family: 'Courier New', ui-monospace, monospace;
  font-size: clamp(1.15rem, 6vw, 2rem); line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-all;
}
.kirma-blok { color: var(--muted-color); letter-spacing: 1px; }
.kirma-blok.cozuldu {
  color: var(--success); font-weight: 700;
  background: #f0fdf4; border-radius: 6px; padding: 1px 5px;
}
.kirma-ayrac { color: var(--muted-color); opacity: .55; padding: 0 2px; }
/* Ayraçsız şifrede bloklar tek bir yığın gibi görünüyordu ve parça sınırları
   seçilemiyordu. İnce bir boşluk sınırı gösteriyor; ayraç OLMADIĞI zaten
   maskenin altında yazılı, o yüzden yanıltmıyor. */
.kirma-blok + .kirma-blok { margin-left: 5px; }

.kirma-not { text-align: center; font-size: .8rem; color: var(--muted-color); }
.kirma-not b { color: var(--text-color); }

.kirma-dene { display: flex; gap: 8px; }
.kirma-giris {
  /* Esneklik tabanı KÜÇÜK: `auto` olunca taban, girdinin varsayılan 20
     karakterlik içsel genişliği oluyor ve kutu + düğme 380px ekranda kıl payı
     sığmayıp alt satıra düşüyordu. */
  flex: 1 1 120px; min-width: 0; padding: 12px 14px;
  border: 2px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 1.1rem; letter-spacing: 1px;
}
.kirma-giris:focus { border-color: var(--primary-color); outline: none; }
.kirma-dene .btn { flex: 0 0 auto; }

.kirma-bildirim {
  min-height: 1.4em; text-align: center; font-size: .84rem; line-height: 1.5;
  padding: 9px 12px; border-radius: var(--border-radius);
}
.kirma-bildirim.bos { color: var(--muted-color); background: transparent; padding: 0; }
.kirma-bildirim.basari { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.kirma-bildirim.hata { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.kirma-bildirim.bilgi { background: var(--surface-soft); border: 1px solid var(--line-color); color: var(--muted-color); }
.kirma-bildirim b { font-weight: 700; }

.kirma-ipuclari { display: grid; gap: 8px; }
.kirma-ipuclari h4 {
  font-size: .78rem; font-weight: 600; color: var(--muted-color);
  text-transform: uppercase; letter-spacing: .5px;
}
.kirma-ipucu-satir {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--border-radius);
  border: 1px solid var(--line-color); background: var(--surface);
}
.kirma-ipucu-satir.tamam { border-color: #bbf7d0; background: #f0fdf4; }
.kirma-no {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .74rem; font-weight: 700;
  background: var(--surface-soft); color: var(--muted-color);
}
.kirma-ipucu-satir.tamam .kirma-no { background: #dcfce7; color: #15803d; }
.kirma-ipucu-metin { font-size: .86rem; line-height: 1.45; min-width: 0; }
.kirma-ipucu-metin small { display: block; font-size: .72rem; color: var(--muted-color); margin-top: 2px; }
.kirma-cevap {
  font-family: 'Courier New', ui-monospace, monospace;
  font-weight: 700; color: #15803d; font-size: .95rem;
}
.js-harf-ac small { font-size: .68rem; opacity: .75; margin-left: 2px; }

.kirma-kural { font-size: .74rem; color: var(--muted-color); text-align: center; line-height: 1.5; }
.kirma-kural b { color: var(--text-color); }

.kirma-basari { align-items: center; text-align: center; gap: 10px; }
.kirma-basari > i { font-size: 2.6rem; color: var(--success); }
.kirma-basari h3 { font-size: 1.2rem; }
.kirma-cozum {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: clamp(1rem, 4.5vw, 1.5rem); font-weight: 700;
  padding: 10px 16px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
  overflow-wrap: anywhere;
}
.kirma-seri { font-size: .88rem; color: var(--muted-color); }

@media (max-width: 640px) {
  .kirma-alan { padding: 14px; }
  .kirma-ipucu-satir { grid-template-columns: 24px 1fr; }
  /* Dar ekranda "Harf aç" alt satıra geçip tam genişliğe yayılıyor: 26px'lik
     bir düğmeye parmakla basmak güvenilir değil. */
  .kirma-ipucu-satir .btn,
  .kirma-ipucu-satir .kirma-cevap { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  /* Kutu ve düğme 380px'te bile yan yana sığıyor; alt satıra atmak dikey
     alanı boşuna yiyordu. Sarma yalnızca gerçekten sığmadığında devreye girer. */
  .kirma-dene { flex-wrap: wrap; }
  .kirma-dene .btn { justify-content: center; }
}

/* --- Eğlence başlık çubuğu: dar ekranda taşmasın ------------------------- */
/* Çubuk (başlık + rumuz + rekor + tam ekran) sarmıyordu; en küçük içerik
   genişliği 360px'lik telefonlarda araç sahnesinin tamamını ekrandan
   taşırıyordu. Otuzdan fazla eğlence oyununun hepsini etkiliyordu; başlığı
   uzun olan oyunlarda taşma 50 pikseli buluyordu. */
.eglence-cubuk { flex-wrap: wrap; }
.eglence-cubuk h2 { min-width: 0; overflow-wrap: anywhere; }
.eglence-cubuk-sag { min-width: 0; flex-wrap: wrap; }
.test-oyuncu { min-width: 0; }
.test-oyuncu b { overflow-wrap: anywhere; }

/* Kademe rozeti: ipucunun kaçıncı zorluk basamağında olduğunu söyler.
   Renk kademeyle koyulaşıyor — liste zaten kolaydan zora sıralı, rozet o
   sıralamayı görünür kılıyor. */
.kirma-kademe {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 9px;
  font-size: .66rem; font-weight: 600; white-space: nowrap;
}
.kirma-kademe.k1 { background: #ecfdf5; color: #047857; }
.kirma-kademe.k2 { background: #eff6ff; color: #1d4ed8; }
.kirma-kademe.k3 { background: #fefce8; color: #a16207; }
.kirma-kademe.k4 { background: #fff7ed; color: #c2410c; }
.kirma-kademe.k5 { background: #fef2f2; color: #b91c1c; }

/* --- Görsel Yeniden Boyutlandırma -------------------------------------- */
/* Sahne iki sütun: solda önizleme (indirilecek dosyanın küçültülmüş hâli),
   sağda ayarlar. Dar ekranda önizleme üste geçiyor — telefonda ayarları
   değiştirirken sonucun görünür kalması gerekiyor. */
.gb-sahne { padding: 0 0 22px; }
.gb-giris, .gb-durum, .gb-govde { margin: 16px 22px 0; }

.gb-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 22px; }

.gb-onizleme-sutun { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.gb-tuval-kutu {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 14px; border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-color);
  /* Saydam alanlar zeminle karışmasın diye damalı desen. */
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .05) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, .05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .05) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.gb-tuval-kutu.surukleneb .gb-tuval { cursor: grab; }
.gb-tuval-kutu.surukleniyor .gb-tuval { cursor: grabbing; }
.gb-tuval {
  max-width: 100%; max-height: 460px; display: block;
  border-radius: 4px; box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  touch-action: none;   /* sürüklerken sayfa kaymasın */
}
.gb-surukle-ipucu {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: .74rem;
  background: rgba(15, 23, 42, .78); color: #fff; pointer-events: none;
}

.gb-kaynak { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.gb-kaynak b { overflow-wrap: anywhere; }
.gb-kaynak span { color: var(--muted-color); font-variant-numeric: tabular-nums; }

.gb-ayar-sutun { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gb-ayar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gb-ayar > label, .gb-etiket { font-size: .84rem; font-weight: 600; }
.gb-ayar select, .gb-ayar input[type="number"] {
  width: 100%; padding: 8px 10px; font: inherit; font-size: .88rem;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color);
}
.gb-ayar select:focus, .gb-ayar input:focus { border-color: var(--primary-color); outline: none; }

.gb-onayar-not, .gb-tur-not {
  font-size: .78rem; line-height: 1.5; color: var(--muted-color);
}
.gb-onayar-not { padding: 8px 10px; border-radius: var(--border-radius); background: var(--surface-soft); }

/* Genişlik — kilit — yükseklik: kilit iki kutunun ortasında ve etiket
   hizasının altında durmalı, bu yüzden alt kenara hizalanıyor. */
.gb-olcu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.gb-kilit {
  width: 38px; height: 38px; border-radius: var(--border-radius); cursor: pointer;
  border: 1px solid var(--line-color); background: var(--surface); color: var(--muted-color);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.gb-kilit[aria-pressed="true"] {
  color: var(--primary-color); border-color: var(--primary-color);
  background: rgba(0, 188, 212, .08);
}

.gb-secenekler { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-secenekler label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 11px; font-size: .84rem;
  border: 1px solid var(--line-color); border-radius: 999px; background: var(--surface);
}
.gb-secenekler label:has(input:checked) {
  border-color: var(--primary-color); background: rgba(0, 188, 212, .08); font-weight: 600;
}
.gb-secenekler input { accent-color: var(--primary-color); }

.gb-zemin { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.gb-zemin input[type="color"] {
  width: 46px; height: 32px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-color); border-radius: var(--border-radius); background: var(--surface);
}

.gb-kalite input[type="range"] { width: 100%; accent-color: var(--primary-color); }
.gb-kalite label { display: flex; justify-content: space-between; }
.gb-kalite span { font-variant-numeric: tabular-nums; color: var(--muted-color); font-weight: 500; }

.gb-sonuc {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gb-sonuc-satir { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.gb-sonuc-satir span { color: var(--muted-color); }
.gb-sonuc-satir b { font-variant-numeric: tabular-nums; }

.gb-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-eylem .btn-primary { flex: 1 1 100%; justify-content: center; }
.gb-eylem .btn-outline { flex: 1 1 100%; justify-content: center; }

.gb-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gb-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

@media (max-width: 860px) {
  .gb-govde { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gb-giris, .gb-durum, .gb-govde { margin-left: 15px; margin-right: 15px; }
  .gb-tuval { max-height: 320px; }
}

/* --- Görsel Küçültme ---------------------------------------------------- */
/* Yerleşim boyutlandırma aracıyla aynı iskelet; farkı önizlemenin ayraçlı
   olması. Ortak kurallar `gb-` öneki altında paylaşılıyor (gb-ayar,
   gb-secenekler, gb-kalite, gb-eylem, gb-sonuc-satir). */
.gk-sahne { padding: 0 0 22px; }
.gk-giris, .gk-durum, .gk-govde { margin: 16px 22px 0; }
.gk-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 22px; }
.gk-onizleme-sutun { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gk-ayar-sutun { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gk-ayar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gk-ayar > label, .gk-etiket-baslik { font-size: .84rem; font-weight: 600; }
.gk-ayar select, .gk-ayar input[type="number"] {
  width: 100%; padding: 8px 10px; font: inherit; font-size: .88rem;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color);
}
.gk-ayar select:focus, .gk-ayar input:focus { border-color: var(--primary-color); outline: none; }

.gk-tuval-kutu {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 14px; border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gk-tuval {
  max-width: 100%; max-height: 520px; display: block; touch-action: none;
  border-radius: 4px; box-shadow: 0 2px 14px rgba(0, 0, 0, .16); cursor: ew-resize;
}
.gk-tuval-kutu.surukleniyor .gk-tuval { cursor: grabbing; }
/* Ayraç tutamağı tuvalin üstünde yüzer; konumu JS'ten yüzde olarak veriliyor. */
.gk-ayrac { position: absolute; top: 14px; bottom: 14px; pointer-events: none; }
.gk-ayrac-tut {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #0f172a; font-size: .72rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.gk-etiket {
  position: absolute; top: 22px; padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; background: rgba(15, 23, 42, .78); color: #fff;
  pointer-events: none;
}
.gk-etiket-sol { left: 22px; }
.gk-etiket-sag { right: 22px; }
.gk-ayrac-not { font-size: .78rem; line-height: 1.5; color: var(--muted-color); }

.gk-kiyas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--muted-color);
}
.gk-kiyas b { color: var(--text-color); font-variant-numeric: tabular-nums; }
.gk-kiyas > i { color: var(--primary-color); }

.gk-hedef-giris { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.gk-hedef-giris select { width: auto; }
.gk-hazir { display: flex; flex-wrap: wrap; gap: 6px; }
.gk-cip {
  padding: 5px 10px; font-size: .78rem; cursor: pointer;
  border: 1px solid var(--line-color); border-radius: 999px;
  background: var(--surface); color: var(--text-color);
}
.gk-cip:hover, .gk-cip.secili {
  border-color: var(--primary-color); background: rgba(0, 188, 212, .08); font-weight: 600;
}

.gk-sonuc {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: var(--border-radius);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gk-sonuc-buyuk { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.gk-sonuc-buyuk span {
  font-size: 1.9rem; font-weight: 700; line-height: 1; color: #059669;
  font-variant-numeric: tabular-nums;
}
.gk-sonuc-buyuk span.gk-buyudu { color: var(--warn); }
.gk-sonuc-buyuk small { font-size: .8rem; color: var(--muted-color); }

.gk-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gk-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

/* --- Görsel Biçim Dönüştürücü ------------------------------------------- */
/* Burada önizleme yok: kullanıcının görmek istediği tek tek görüntüler değil,
   hangi dosyanın çevrildiği ve ne kadar yer kazanıldığı. */
.gd-sahne { padding: 0 0 22px; }
.gd-giris, .gd-ayarlar, .gd-durum, .gd-ilerleme, .gd-sonuc { margin: 16px 22px 0; }
.gd-ayarlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.gd-ilerleme { display: flex; align-items: center; gap: 12px; }
.gd-ilerleme-cubuk {
  flex: 1; height: 7px; border-radius: 999px; overflow: hidden; background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.gd-ilerleme-cubuk span {
  display: block; height: 100%; width: 0; background: var(--primary-color);
  transition: width .18s ease;
}
.gd-ilerleme-yazi {
  font-size: .78rem; color: var(--muted-color); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}

.gd-ozet {
  padding: 12px 14px; margin-bottom: 12px; font-size: .87rem; line-height: 1.6;
  border-radius: var(--border-radius); background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.gd-ozet b { font-variant-numeric: tabular-nums; }

/* Tablo dar ekranda sayfayı taşırmasın: kendi içinde kayar. */
.gd-liste-sar { overflow-x: auto; margin-bottom: 12px; }
.gd-liste { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gd-liste th, .gd-liste td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line-color);
  white-space: nowrap;
}
.gd-liste th { font-size: .76rem; color: var(--muted-color); font-weight: 600; }
.gd-liste td { font-variant-numeric: tabular-nums; }
.gd-ad { white-space: normal; overflow-wrap: anywhere; min-width: 150px; }
.gd-ad small { display: block; font-size: .72rem; color: var(--muted-color); }
.gd-azalis { color: #059669; font-weight: 600; }
.gd-artis { color: var(--warn); font-weight: 600; }
.gd-hata { color: #b91c1c; white-space: normal; }
.gd-hatali { background: rgba(185, 28, 28, .04); }
.gd-indir-tek {
  width: 30px; height: 30px; border-radius: var(--border-radius); cursor: pointer;
  border: 1px solid var(--line-color); background: var(--surface); color: var(--primary-color);
}
.gd-indir-tek:hover { border-color: var(--primary-color); background: rgba(0, 188, 212, .08); }

.gd-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gd-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

@media (max-width: 860px) {
  .gk-govde { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gk-giris, .gk-durum, .gk-govde,
  .gd-giris, .gd-ayarlar, .gd-durum, .gd-ilerleme, .gd-sonuc {
    margin-left: 15px; margin-right: 15px;
  }
  .gk-tuval { max-height: 320px; }
  .gd-ilerleme-yazi { max-width: 40%; }
}

/* --- [hidden] her yerde gizler ------------------------------------------ */
/* Tarayıcının `[hidden] { display: none }` varsayılanı YALNIZCA display'i
   ayrıca tanımlanmamış ögelerde işe yarar: `display: flex` ya da `grid`
   veren bir sınıf onu sessizce ezer ve `el.hidden = true` hiçbir şey
   yapmaz. Bu yüzden site boyunca 22 ayrı `.filanca[hidden]` kuralı
   birikmişti — her araç aynı tuzağa ayrı ayrı düşüp kendi yamasını
   yazmış. Kural burada bir kez konuyor; yeni araçların aynı hatayı
   yapması artık mümkün değil.

   `!important` şart: yamalanan kuralların çoğu bu satırdan daha yüksek
   özgüllüğe sahip (`.gk-ayar.gb-kalite` gibi). */
[hidden] { display: none !important; }

/* --- Ana sayfa: üç bölüm vitrini --------------------------------------- */
/* Ana sayfa 2026-09-10'da hesaplama listesi olmaktan çıkıp üç bölümü birden
   tanıtan bir girişe dönüştü. Hesaplama listesinin kendisi `/hesaplama`'ya
   taşındı ve oradaki stiller (.hero, .katalog, .categories-container)
   olduğu gibi çalışmaya devam ediyor — bu blok yalnızca yeni parçalar. */
.hero-genis h1 { max-width: 22ch; }

/* Üç yol kartı: bölüme giriş. Eşit genişlik bilinçli — hiçbiri diğerinden
   önemli görünmemeli. */
.yol-kartlari {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 34px;
}
.yol-kart {
  display: flex; flex-direction: column; gap: 7px; padding: 20px 18px;
  border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--line-color); border-top: 3px solid var(--c, var(--primary-color));
  color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.yol-kart:hover {
  transform: translateY(-3px); border-color: var(--c, var(--primary-color));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
}
.yol-ikon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px;
  border-radius: 12px; font-size: 1.15rem;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
}
.yol-kart strong { font-size: 1.06rem; }
.yol-kart small { font-size: .85rem; line-height: 1.55; color: var(--muted-color); }
.yol-sayi {
  margin-top: auto; padding-top: 8px; font-size: .78rem; font-weight: 600; color: var(--c);
  font-variant-numeric: tabular-nums;
}

/* Bölüm başlığı + "Tümü" bağlantısı aynı satırda. */
.bolum-basligi {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 30px;
}
.bolum-basligi .page-header { margin: 0; }
.bolum-tumu {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  border: 1px solid var(--line-color); background: var(--surface);
  color: var(--primary-color); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.bolum-tumu:hover { border-color: var(--primary-color); background: rgba(0, 188, 212, .07); }

/* Arama sonuçlarında iki kart biçimi ayrı ızgaralarda toplanıyor. */
.arama-alt-baslik {
  margin: 22px 0 10px; font-size: .9rem; font-weight: 600; color: var(--muted-color);
}

@media (max-width: 900px) {
  .yol-kartlari { grid-template-columns: 1fr; gap: 11px; }
  .yol-kart { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .yol-kart .yol-ikon { margin-bottom: 0; }
  .yol-kart strong { flex: 1; min-width: 0; }
  .yol-kart small { flex-basis: 100%; }
  .yol-sayi { margin-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
  .bolum-basligi { align-items: flex-start; }
  .bolum-tumu { width: 100%; justify-content: center; }
}

/* --- Görselden PDF ------------------------------------------------------ */
/* Solda sayfa listesi (sıra buradan değişiyor), sağda ayarlar. Küçük
   önizlemeler data-URI olarak listede duruyor; tam çözünürlüğü tutmak 50
   sayfalık bir işte yüzlerce megabayt demekti. */
.gp-sahne { padding: 0 0 22px; }
.gp-giris, .gp-durum, .gp-govde { margin: 16px 22px 0; }
.gp-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 22px; }
.gp-liste-sutun { min-width: 0; }
.gp-ayar-sutun { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.gp-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-satir {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface);
}
.gp-no {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-soft); color: var(--muted-color);
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.gp-kucuk {
  flex: none; width: 46px; height: 46px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line-color); background: var(--surface-soft);
}
.gp-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gp-bilgi b { font-size: .86rem; overflow-wrap: anywhere; }
.gp-bilgi small { font-size: .75rem; color: var(--muted-color); font-variant-numeric: tabular-nums; }
.gp-eylemler { flex: none; display: flex; gap: 4px; }
.gp-mini {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: .74rem;
  border: 1px solid var(--line-color); background: var(--surface); color: var(--muted-color);
}
.gp-mini:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.gp-mini:disabled { opacity: .35; cursor: default; }
.gp-sil:hover { border-color: #dc2626; color: #dc2626; }

.gp-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.gp-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

/* --- CSV ↔ JSON --------------------------------------------------------- */
.cj-sahne { padding: 0 0 22px; }
.cj-yon, .cj-giris, .cj-ayarlar, .cj-durum, .cj-sonuc { margin: 16px 22px 0; }
.cj-yon { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-yon label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 15px; font-size: .88rem;
  border: 1px solid var(--line-color); border-radius: 999px; background: var(--surface);
}
.cj-yon label:has(input:checked) {
  border-color: var(--primary-color); background: rgba(0, 188, 212, .08); font-weight: 600;
}
.cj-yon input { accent-color: var(--primary-color); }

.cj-giris { display: flex; flex-direction: column; gap: 12px; }
.cj-giris textarea {
  width: 100%; resize: vertical; min-height: 150px;
  padding: 12px 14px; border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); color: var(--text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.6;
}
.cj-giris textarea:focus { border-color: var(--primary-color); outline: none; }
.cj-dosya { padding: 18px 16px; }

.cj-ayarlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.cj-sonuc-eylem { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tablo kendi içinde kayar: 40 sütunlu bir CSV sayfayı taşırmamalı. */
.cj-tablo-sar {
  overflow-x: auto; margin-top: 12px;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
}
.cj-tablo { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cj-tablo th, .cj-tablo td {
  padding: 7px 11px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-color);
}
.cj-tablo th {
  background: var(--surface-soft); font-size: .76rem; font-weight: 600;
  color: var(--muted-color); position: sticky; top: 0;
}
.cj-tablo tr:last-child td { border-bottom: 0; }
.cj-devam { margin-top: 8px; font-size: .78rem; color: var(--muted-color); }

.cj-ham-kutu { margin-top: 14px; }
.cj-ham-kutu summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.cj-ham {
  margin-top: 10px; padding: 12px 14px; max-height: 340px; overflow: auto;
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface-soft); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.6;
}

.cj-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.cj-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

@media (max-width: 860px) {
  .gp-govde { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gp-giris, .gp-durum, .gp-govde,
  .cj-yon, .cj-giris, .cj-ayarlar, .cj-durum, .cj-sonuc {
    margin-left: 15px; margin-right: 15px;
  }
  .cj-yon label { flex: 1 1 100%; justify-content: center; }
  .cj-sonuc-eylem .btn { flex: 1 1 46%; justify-content: center; }
}

/* --- PDF araçları (PDF'ten Görsele, PDF Küçültme) ----------------------- */
/* İkisi de aynı iskeleti paylaşıyor: solda sayfa önizlemesi, sağda ayarlar.
   `pg-` önekli sınıflar her iki araçta da kullanılıyor. */
.pg-sahne, .pk-sahne { padding: 0 0 22px; }
.pg-giris, .pg-durum, .pg-govde, .pg-ilerleme,
.pk-giris, .pk-durum, .pk-govde, .pk-uyari { margin: 16px 22px 0; }
.pg-govde, .pk-govde {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: 22px;
}
.pg-onizleme-sutun { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pg-ayar-sutun { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pg-tuval-kutu {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 16px; border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.pg-tuval {
  max-width: 100%; max-height: 520px; display: block;
  border-radius: 3px; box-shadow: 0 3px 16px rgba(0, 0, 0, .18); background: #fff;
}
.pg-belge { font-size: .84rem; overflow-wrap: anywhere; }

/* Motor uyarısı: 1,4 MB'lık indirmeyi sessizce yapmamak için. */
.pg-motor-not {
  margin-top: 12px; padding: 10px 13px; font-size: .8rem; line-height: 1.55;
  border-radius: var(--border-radius); color: var(--muted-color);
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.pg-motor-not i { color: var(--primary-color); }

.pg-ilerleme { display: flex; align-items: center; gap: 12px; }

.pg-durum, .pk-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.pg-durum-uyari, .pk-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

/* Metin katmanı uyarısı — küçültmenin bedeli. Gizlenmemeli, bu yüzden
   sayfanın en görünür yerinde ve sarı zeminde. */
.pk-uyari {
  display: flex; gap: 12px; padding: 13px 15px;
  border-radius: var(--border-radius); background: #fffbeb; border: 1px solid #fde68a;
}
.pk-uyari > i { font-size: 1.15rem; color: #b45309; margin-top: 2px; }
.pk-uyari b { display: block; font-size: .9rem; color: #92400e; }
.pk-uyari p { margin-top: 4px; font-size: .83rem; line-height: 1.6; color: #78350f; }

@media (max-width: 860px) {
  .pg-govde, .pk-govde { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pg-giris, .pg-durum, .pg-govde, .pg-ilerleme,
  .pk-giris, .pk-durum, .pk-govde, .pk-uyari {
    margin-left: 15px; margin-right: 15px;
  }
  .pg-tuval { max-height: 340px; }
}

/* --- PDF Birleştirme / Düzenleme ---------------------------------------- */
.pb-sahne, .pd-sahne { padding: 0 0 22px; }
.pb-giris, .pb-durum, .pb-govde, .pd-giris, .pd-durum, .pd-govde { margin: 16px 22px 0; }

.pb-ikon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 8px; font-size: 1.15rem; color: #dc2626; background: #fef2f2;
}
/* Özet + eylem düğmesi yan yana: liste uzun olduğu için düğme aşağıda kalmalı. */
.pb-alt {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 18px;
}
.pb-ozet { flex: 1; min-width: 220px; }
.pb-alt .btn-primary { flex: 0 0 auto; }

.pb-durum, .pd-durum {
  padding: 11px 14px; border-radius: var(--border-radius); font-size: .85rem; line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-color);
}
.pb-durum-uyari, .pd-durum-uyari { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

.pd-toplu { display: flex; flex-wrap: wrap; gap: 7px; }

/* Sayfa ızgarası: seçim durumu kartın kendisinde görünür olmalı, küçük bir
   onay kutusunda değil — kullanıcı 60 sayfaya tek bakışta karar veriyor. */
.pd-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 12px; margin-top: 14px;
}
.pd-sayfa {
  border: 2px solid var(--line-color); border-radius: var(--border-radius);
  background: var(--surface); overflow: hidden; opacity: .45;
  transition: opacity .15s ease, border-color .15s ease;
}
.pd-sayfa.secili { opacity: 1; border-color: var(--primary-color); }
.pd-onizleme {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  padding: 6px; cursor: pointer; border: 0; background: var(--surface-soft);
}
.pd-onizleme img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .2s ease;
}
.pd-tik {
  position: absolute; top: 6px; right: 6px; width: 21px; height: 21px;
  display: grid; place-items: center; border-radius: 50%; font-size: .62rem;
  background: var(--surface); color: transparent; border: 1px solid var(--line-color);
}
.pd-sayfa.secili .pd-tik {
  background: var(--primary-color); color: #fff; border-color: var(--primary-color);
}
.pd-alt-cubuk {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 7px; border-top: 1px solid var(--line-color);
}
.pd-no { font-size: .76rem; font-weight: 600; color: var(--muted-color); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .pb-giris, .pb-durum, .pb-govde, .pd-giris, .pd-durum, .pd-govde {
    margin-left: 15px; margin-right: 15px;
  }
  .pd-izgara { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
  .pb-alt .btn-primary { flex: 1 1 100%; justify-content: center; }
  .pd-toplu .btn { flex: 1 1 46%; justify-content: center; }
}

/* --- Kullanım senaryoları listesi ---------------------------------------- */
/* Araçlar teknik adlarıyla duruyor ("Görsel Küçültme") ama kullanıcı işiyle
   arıyor ("müdür vesikalık sıkıştırma"). Bu liste o köprüyü kuruyor: kim,
   hangi kurumda, hangi engelle karşılaşınca bu aracı kullanır. */
.senaryo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.senaryo-list li {
  position: relative; padding: 11px 14px 11px 40px; font-size: .89rem; line-height: 1.65;
  border-radius: var(--border-radius); background: var(--surface-soft);
  border: 1px solid var(--line-color);
}
.senaryo-list li::before {
  content: "\f0b1";                      /* fa-briefcase */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 14px; top: 12px; font-size: .82rem; color: var(--primary-color);
}
.senaryo-list li b { color: var(--text-color); }

/* --- 100 Kutucuk Yarışı (Checkbox Race) ----------------------------------- */
.checkbox-yaris-kap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; width: min(520px, 94vw); margin: 0 auto; padding: 12px 0;
}
.checkbox-yaris-bilgi {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px; background: var(--surface-soft); border-radius: var(--radius-sm);
  border: 1px solid var(--line-color); font-size: .95rem; font-weight: 600;
}
.checkbox-sayac-rozet { color: var(--primary-color); display: flex; align-items: center; gap: 7px; }
.checkbox-canli-sure { font-variant-numeric: tabular-nums; color: #10b981; font-size: 1.15rem; font-weight: 700; }
.checkbox-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: 100%;
}
.kutu-item {
  aspect-ratio: 1; border: 1.5px solid var(--line-color); border-radius: 6px;
  background: var(--surface-color, #fff); cursor: pointer; display: flex;
  align-items: center; justify-content: center; position: relative;
  transition: all .12s ease; padding: 0; outline: none; touch-action: manipulation;
}
.kutu-item:hover:not(:disabled) { border-color: #10b981; transform: scale(1.06); }
.kutu-no { font-size: clamp(.65rem, 1.8vw, .85rem); font-weight: 600; color: var(--muted-color); }
.kutu-check { display: none; color: #fff; font-size: clamp(.75rem, 2vw, 1rem); }
.kutu-item.aktif-hedef {
  border-color: #10b981; box-shadow: 0 0 0 2.5px rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .08); transform: scale(1.05);
}
.kutu-item.isaretlendi {
  background: #10b981; border-color: #059669; cursor: default;
}
.kutu-item.isaretlendi .kutu-no { display: none; }
.kutu-item.isaretlendi .kutu-check { display: block; }
.kutu-item.kutu-hata {
  animation: salla .22s ease-in-out; border-color: #ef4444; background: rgba(239, 68, 68, .12);
}
@keyframes salla {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- Renk Dalgası (Drench) ------------------------------------------------ */
.drench-kap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; width: min(460px, 94vw); margin: 0 auto; padding: 10px 0;
}
.drench-durum-bar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  gap: 12px; font-size: .92rem;
}
.drench-sayac { font-weight: 600; }
.drench-sayac b { font-size: 1.25rem; color: #3b82f6; font-variant-numeric: tabular-nums; }
.drench-yuzde-bar-wrap {
  flex: 1; height: 24px; background: var(--surface-soft); border-radius: 12px;
  position: relative; overflow: hidden; border: 1px solid var(--line-color);
  display: flex; align-items: center; justify-content: center;
}
.drench-yuzde-dolgu {
  position: absolute; left: 0; top: 0; bottom: 0; background: #3b82f6;
  opacity: .35; transition: width .25s ease;
}
.drench-yuzde-metin {
  position: relative; z-index: 1; font-size: .78rem; font-weight: 700; color: var(--text-color);
}
.drench-izgara {
  display: grid; grid-template-columns: repeat(var(--boyut, 14), 1fr); gap: 2px;
  width: 100%; aspect-ratio: 1; padding: 6px; background: var(--surface-soft);
  border-radius: var(--border-radius); border: 2px solid var(--line-color);
}
.drench-kare {
  aspect-ratio: 1; border-radius: 2px; transition: background-color .15s ease;
}
.drench-palet {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding-top: 6px;
}
.drench-renk-btn {
  width: clamp(40px, 12vw, 54px); height: clamp(40px, 12vw, 54px); border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); transition: transform .12s, box-shadow .12s;
  touch-action: manipulation;
}
.drench-renk-btn:hover:not(:disabled) { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.drench-renk-btn:disabled { opacity: .75; cursor: default; }
.drench-renk-btn.aktif-renk { box-shadow: 0 0 0 3px var(--dark-color, #0f172a); }

/* --- Görünmez İnek (Invisible Cow) --------------------------------------- */
.inek-oyun-alani {
  position: relative; width: 100%; min-height: min(52vh, 460px);
  background: radial-gradient(circle at center, var(--surface-soft) 0%, rgba(245, 158, 11, .03) 100%);
  border: 2px dashed var(--line-color); border-radius: var(--border-radius);
  cursor: crosshair; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 14px;
}
.inek-radar-bilgi {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px; background: var(--surface-color, #fff); border-radius: var(--radius-sm);
  border: 1px solid var(--line-color); font-size: .88rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.04); pointer-events: none; z-index: 2;
}
.inek-ses-durum { color: #d97706; display: flex; align-items: center; gap: 8px; }
.inek-canli-sure { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: #f59e0b; }
.inek-hedef-gorsel {
  position: absolute; transform: translate(-50%, -50%); display: flex;
  flex-direction: column; align-items: center; justify-content: center; z-index: 5;
}
.inek-emoji { font-size: 52px; line-height: 1; }
.inek-bulundu-metin {
  background: #10b981; color: #fff; font-size: .75rem; font-weight: 800;
  padding: 3px 8px; border-radius: 10px; margin-top: 4px; white-space: nowrap;
}
.inek-hedef-gorsel.inek-patlama {
  animation: inekBelir .4s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes inekBelir {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.inek-ipucu-halka {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, .6); transform: translate(-50%, -50%) scale(0);
  pointer-events: none; opacity: 0;
}
.inek-ipucu-halka.halka-anim {
  animation: dalga .4s ease-out;
}
@keyframes dalga {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* --- Uyku Saati Hesaplayıcı (SleepyTime) ----------------------------------- */
.uyku-kap {
  display: flex; flex-direction: column; gap: 20px; width: min(640px, 94vw);
  margin: 0 auto; padding: 12px 0;
}
.uyku-mod-secici {
  display: flex; gap: 10px; background: var(--surface-soft); padding: 5px;
  border-radius: var(--border-radius); border: 1px solid var(--line-color);
}
.uyku-mod-btn {
  flex: 1; padding: 11px 14px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-color); font-weight: 600;
  font-size: .88rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: all .15s ease;
}
.uyku-mod-btn.aktif {
  background: var(--surface-color, #fff); color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); font-weight: 700;
}
.uyku-girdi-panel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; background: var(--surface-soft); border-radius: var(--border-radius);
  border: 1px solid var(--line-color);
}
.uyku-label { font-size: .95rem; font-weight: 600; color: var(--text-color); }
.uyku-zaman-secici { display: flex; align-items: center; gap: 10px; }
.uyku-select {
  padding: 10px 16px; font-size: 1.4rem; font-weight: 700; color: var(--primary-color);
  background: var(--surface-color, #fff); border: 2px solid var(--line-color);
  border-radius: var(--radius-sm); cursor: pointer; font-family: monospace, inherit;
}
.uyku-select:focus { border-color: var(--primary-color); outline: none; }
.uyku-iki-nokta { font-size: 1.6rem; font-weight: 800; color: var(--muted-color); }
.uyku-simdi-bilgi {
  padding: 14px 18px; background: var(--surface-soft); border-radius: var(--radius-sm);
  border-left: 4px solid #6366f1; color: var(--text-color); font-size: .94rem;
  font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.uyku-kartlar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 14px;
}
.uyku-kart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 12px; background: var(--surface-color, #fff);
  border: 1.5px solid var(--line-color); border-radius: var(--border-radius);
  position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: transform .15s ease;
}
.uyku-kart:hover { transform: translateY(-3px); }
.uyku-kart-oneri {
  border-color: #10b981; background: rgba(16, 185, 129, .04);
}
.uyku-rozet-yildiz {
  position: absolute; top: -11px; background: #10b981; color: #fff;
  font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 12px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}
.uyku-kart-saat { font-size: 1.7rem; font-weight: 800; color: var(--dark-color); font-variant-numeric: tabular-nums; }
.uyku-kart-oneri .uyku-kart-saat { color: #10b981; }
.uyku-kart-detay { font-size: .82rem; color: var(--muted-color); text-align: center; }
.uyku-kart-detay strong { color: var(--text-color); }
.uyku-kart-etiket {
  font-size: .75rem; font-weight: 600; color: var(--primary-color);
  margin-top: 4px; text-align: center;
}
.uyku-aciklama-kutu {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--surface-soft); border: 1px solid var(--line-color);
  border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.65;
  color: var(--text-color);
}
.uyku-aciklama-kutu i { color: #6366f1; margin-top: 3px; font-size: 1.1rem; }

/* Günün Uzay Fotoğrafı & Doğum Gününde Evren (NASA APOD) */
.uzay-galeri-kap {
  display: flex; flex-direction: column; gap: 18px; max-width: 960px; margin: 0 auto;
}
.uzay-filtre-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; background: var(--surface-soft);
  border: 1px solid var(--line-color); border-radius: var(--border-radius);
}
.uzay-sekmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.uzay-sekme-btn {
  padding: 8px 14px; border: 1px solid var(--line-color); border-radius: var(--radius-sm);
  background: var(--surface-color, #fff); color: var(--text-color); font-size: .84rem;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.uzay-sekme-btn:hover { border-color: #8b5cf6; color: #8b5cf6; }
.uzay-sekme-btn.aktif {
  background: #8b5cf6; color: #fff; border-color: #8b5cf6;
}
.uzay-tarih-secici {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.uzay-tarih-label {
  font-size: .85rem; font-weight: 700; color: var(--text-color);
  display: inline-flex; align-items: center; gap: 6px;
}
.uzay-tarih-grup { display: flex; align-items: center; gap: 8px; }
.uzay-tarih-input {
  padding: 7px 12px; border: 1px solid var(--line-color); border-radius: var(--radius-sm);
  background: var(--surface-color, #fff); color: var(--text-color); font-size: .85rem;
  font-weight: 600; font-family: inherit; cursor: pointer;
}
.uzay-getir-btn {
  padding: 7px 14px; background: #8b5cf6; color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: .85rem; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .15s ease;
}
.uzay-getir-btn:hover { opacity: .9; }

.uzay-kart {
  background: #090d16; color: #f1f5f9; border-radius: var(--border-radius);
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.uzay-uyari-serit {
  padding: 10px 16px; background: rgba(245, 158, 11, 0.15); border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24; font-size: .84rem; display: flex; align-items: center; gap: 8px;
}
.uzay-gorsel-kapsayici {
  position: relative; width: 100%; min-height: 280px; max-height: 600px;
  background: #04060a; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.uzay-ana-gorsel {
  width: 100%; height: auto; max-height: 600px; object-fit: contain;
  cursor: zoom-in; transition: transform .2s ease;
}
.uzay-ana-gorsel:hover { transform: scale(1.015); }
.uzay-video-kap {
  width: 100%; aspect-ratio: 16 / 9; max-height: 560px;
}
.uzay-video-kap iframe { width: 100%; height: 100%; }
.uzay-zoom-btn {
  position: absolute; bottom: 14px; right: 14px; background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px; padding: 6px 14px; font-size: .8rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.uzay-zoom-btn:hover { background: #8b5cf6; border-color: #8b5cf6; }

.uzay-bilgi-govde {
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
}
.uzay-ust-bilgi { display: flex; flex-direction: column; gap: 6px; }
.uzay-tarih-rozet {
  display: inline-flex; align-items: center; gap: 6px; font-size: .82rem;
  font-weight: 700; color: #c4b5fd; background: rgba(139, 92, 246, 0.2);
  padding: 3px 10px; border-radius: 999px; width: fit-content;
}
.uzay-baslik {
  font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.35; margin: 0;
}
.uzay-aciklama {
  font-size: .92rem; line-height: 1.7; color: #cbd5e1; margin: 0;
}
.uzay-aksiyonlar {
  display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 4px;
}
.uzay-btn {
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: .85rem;
  font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; text-decoration: none; transition: all .15s ease;
}
.uzay-btn-primary {
  background: #8b5cf6; color: #fff; border: none;
}
.uzay-btn-primary:hover { background: #7c3aed; }
.uzay-btn-secondary {
  background: rgba(255, 255, 255, 0.08); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.15);
}
.uzay-btn-secondary:hover { background: rgba(255, 255, 255, 0.15); }
.uzay-btn-link {
  background: transparent; color: #94a3b8; border: 1px dashed rgba(255, 255, 255, 0.2);
}
.uzay-btn-link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.uzay-yukleniyor {
  padding: 60px 20px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center;
}
.uzay-spinner {
  width: 44px; height: 44px; border: 3px solid rgba(139, 92, 246, 0.2);
  border-top-color: #8b5cf6; border-radius: 50%; animation: spin 1s linear infinite;
}
.uzay-yukleniyor-metin { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
.uzay-yukleniyor-alt { font-size: .85rem; color: #94a3b8; }

.uzay-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.uzay-modal-overlay.aktif { display: flex; }
.uzay-modal-icerik {
  position: relative; max-width: 96vw; max-height: 94vh; display: flex;
  flex-direction: column; align-items: center; gap: 10px;
}
.uzay-modal-img {
  max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.uzay-modal-kapat {
  position: absolute; top: -14px; right: -14px; width: 36px; height: 36px;
  border-radius: 50%; background: #fff; color: #0f172a; border: none;
  font-size: 1.4rem; font-weight: 800; cursor: pointer; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.uzay-modal-alt {
  color: #e2e8f0; font-size: .95rem; font-weight: 700; text-align: center;
}

/* Dünya Haritası: Ülke Bulma Oyunu */
.dunya-sahne {
  background: #060b13; border-radius: var(--border-radius); overflow: hidden;
}
.dunya-govde {
  position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 260px; max-height: 520px;
  background: #091322; overflow: hidden; touch-action: none; display: flex;
  align-items: center; justify-content: center;
}
.dunya-govde canvas {
  width: 100%; height: 100%; display: block; cursor: crosshair;
}
.dunya-tur-satirlari {
  display: flex; flex-direction: column; gap: 6px; max-height: 180px;
  overflow-y: auto; padding: 4px; margin-top: 8px;
}
.dunya-tur-satir {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--surface-soft); border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 600;
}
.dunya-tur-satir.tam {
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25);
}
.tur-no { font-size: .75rem; color: var(--muted-color); width: 28px; }
.tur-ulke { flex: 1; text-align: left; font-weight: 700; color: var(--text-color); }
.tur-sapma { font-size: .8rem; color: var(--muted-color); padding: 0 10px; }
.dunya-tur-satir.tam .tur-sapma { color: #16a34a; font-weight: 700; }
.tur-puan { font-size: .85rem; font-weight: 800; color: #f59e0b; }

/* Dünya Bayrakları Testi */
.bayrak-sahne-standart {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.bayrak-govde-standart {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.bayrak-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  padding: 20px 16px;
}
.bayrak-onboarding-ikon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 16px;
}
.bayrak-onboarding h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-color);
}
.bayrak-onboarding p {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.bayrak-onboarding-ozellikler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 16px;
}
.ozellik-madde {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--text-color);
}
.ozellik-madde i {
  color: var(--primary-color);
  font-size: 1rem;
}
.bayrak-oyun-alani {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 540px;
  width: 100%;
  text-align: center;
}
.bayrak-tuval-sarmal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.bayrak-tuval {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.09);
  pointer-events: none;
  background: #f8fafc;
}
.bayrak-yukleniyor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.7);
  border-radius: 10px;
}
.bayrak-kronometre-text {
  font-size: .88rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.bayrak-kart {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 540px; width: 100%; text-align: center;
}
.bayrak-krono-cubuk { width: 100%; display: flex; justify-content: flex-end; }
.bayrak-kronometre {
  font-size: .88rem; font-weight: 700; color: #f59e0b; background: rgba(245, 158, 11, 0.12);
  padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.bayrak-gorsel-alani {
  font-size: 5.8rem; line-height: 1.1; margin: 4px 0;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
  transition: transform .2s ease;
}
.bayrak-soru-metni {
  font-size: 1.1rem; font-weight: 700; color: var(--text-color);
}
.bayrak-secenekler {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 8px;
}
@media (max-width: 500px) {
  .bayrak-secenekler { grid-template-columns: 1fr; gap: 10px; }
  .bayrak-gorsel-alani { font-size: 4.6rem; }
}
.bayrak-secenek-btn {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--surface, #fff); border: 2px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px); color: var(--text, #1e293b); font-size: .95rem;
  font-weight: 600; cursor: pointer; text-align: left; transition: all .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.bayrak-secenek-btn:hover {
  border-color: #0284c7; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}
.bayrak-secenek-btn.dogru {
  background: #22c55e !important; color: #fff !important; border-color: #16a34a !important;
  transform: scale(1.02);
}
.bayrak-secenek-btn.yanlis {
  background: #ef4444 !important; color: #fff !important; border-color: #dc2626 !important;
  opacity: .85;
}
.secenek-tus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; background: var(--surface-soft);
  color: var(--muted-color); font-size: .75rem; font-weight: 800; border: 1px solid var(--line-color);
}
.bayrak-secenek-btn.dogru .secenek-tus,
.bayrak-secenek-btn.yanlis .secenek-tus {
  background: rgba(255,255,255,0.25); color: #fff; border-color: transparent;
}
.secenek-ad { flex: 1; }
.bayrak-seri-rozet {
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
  font-size: .75rem; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* Sanal Piyano & Melodi Hafızası */
.piyano-sahne {
  border-radius: var(--border-radius); overflow: hidden;
}
.piyano-kontrol-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; background: var(--surface-soft);
  border-bottom: 1px solid var(--line-color);
}
.piyano-mod-secici { display: flex; gap: 8px; }
.piyano-mod-btn {
  padding: 8px 14px; border: 1px solid var(--line-color); border-radius: var(--radius-sm);
  background: var(--surface-color, #fff); color: var(--text-color); font-size: .85rem;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.piyano-mod-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.piyano-mod-btn.aktif {
  background: #7c3aed; color: #fff; border-color: #7c3aed;
}
.piyano-durum-alani { display: flex; align-items: center; gap: 8px; }
.piyano-ipucu-metin { font-size: .84rem; color: var(--muted-color); font-weight: 500; }
.piyano-dinle-rozet {
  background: #f59e0b; color: #fff; font-size: .82rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; animation: pulse 1s infinite;
}
.piyano-cal-rozet {
  background: #10b981; color: #fff; font-size: .82rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}

.piyano-govde {
  position: relative; width: 100%; min-height: 280px; padding: 24px 16px;
  background: #0f172a; display: flex; justify-content: center; align-items: center;
  overflow-x: auto; overscroll-behavior: contain;
}
.piyano-klavye {
  display: inline-flex; position: relative; user-select: none;
  padding: 10px 14px; background: #020617; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 2px solid #1e293b;
}
.piyano-tus {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  cursor: pointer; transition: transform .08s ease, background .08s ease;
}
.beyaz-tus {
  width: clamp(34px, 4.8vw, 54px); height: 210px; background: #ffffff;
  border: 1px solid #94a3b8; border-radius: 0 0 6px 6px; padding-bottom: 12px;
  color: #334155; box-shadow: inset 0 -4px 0 #cbd5e1, 0 3px 6px rgba(0,0,0,0.15);
}
.beyaz-tus:hover { background: #f8fafc; }
.beyaz-tus.aktif {
  background: #c7d2fe !important; transform: translateY(4px);
  box-shadow: inset 0 -1px 0 #818cf8;
}

.siyah-tus {
  width: clamp(22px, 3.2vw, 34px); height: 130px; background: #0f172a;
  border-radius: 0 0 4px 4px; margin-left: clamp(-17px, -2.4vw, -11px);
  margin-right: clamp(-17px, -2.4vw, -11px); z-index: 2; padding-bottom: 8px;
  color: #e2e8f0; box-shadow: inset 0 -3px 0 #334155, 0 4px 10px rgba(0,0,0,0.4);
}
.siyah-tus:hover { background: #1e293b; }
.siyah-tus.aktif {
  background: #6366f1 !important; transform: translateY(3px);
}

.tus-nota-adi { font-size: .8rem; font-weight: 800; pointer-events: none; }
.tus-harf {
  font-size: .65rem; font-weight: 700; opacity: .6; pointer-events: none;
  font-family: inherit; margin-top: 2px;
}

/* ==========================================
   DEVRE BAĞLANTISI (LUUPS)
   ========================================== */
.devre-sahne, .devre-sahne-standart {
  background: var(--surface); color: var(--text-color); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden;
}
.devre-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.devre-hamle-sayac {
  margin-left: 12px; font-size: .88rem; color: var(--text-muted); font-weight: 600;
}
.devre-govde, .devre-govde-standart {
  position: relative; width: 100%; min-height: 420px; padding: 24px 16px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.devre-onboarding, .cokertme-onboarding, .mayin-onboarding, .saymaca-onboarding, .zen-onboarding, .qwop-onboarding {
  display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 540px; margin: 0 auto; padding: 20px 16px;
}
.devre-onboarding-ikon, .cokertme-onboarding-ikon, .mayin-onboarding-ikon, .saymaca-onboarding-ikon, .zen-onboarding-ikon, .qwop-onboarding-ikon {
  width: 68px; height: 68px; border-radius: 20px; background: rgba(59, 130, 246, 0.12); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 16px;
}
.devre-onboarding h3, .cokertme-onboarding h3, .mayin-onboarding h3, .saymaca-onboarding h3, .zen-onboarding h3, .qwop-onboarding h3 {
  font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; color: var(--text-color);
}
.devre-onboarding p, .cokertme-onboarding p, .mayin-onboarding p, .saymaca-onboarding p, .zen-onboarding p, .qwop-onboarding p {
  font-size: .92rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px;
}
.devre-grid-kapsayici {
  display: grid; gap: 8px; width: 100%; max-width: min(90vw, 380px);
  aspect-ratio: 1 / 1; padding: 10px; background: var(--surface);
  border-radius: 14px; border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.devre-hucre {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
  background: var(--surface-soft); border: 1px solid var(--border);
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, transform .1s;
}
.devre-hucre:hover {
  background: var(--surface); border-color: #0284c7;
}
.devre-hucre:active {
  transform: scale(0.96);
}
.devre-parca {
  width: 90%; height: 90%; display: block;
  transform-origin: center center;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.devre-hat {
  stroke: #94a3b8; stroke-width: 14; stroke-linecap: round;
  transition: stroke .25s ease, filter .25s ease;
}
.devre-eklem {
  fill: #64748b; transition: fill .25s ease, filter .25s ease;
}
.devre-hucre.akimli {
  background: rgba(14, 165, 233, 0.12);
  border-color: #0284c7;
  box-shadow: inset 0 0 10px rgba(14, 165, 233, 0.25);
}
.devre-hucre.akimli .devre-hat {
  stroke: #0284c7;
  filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.6));
}
.devre-hucre.akimli .devre-eklem {
  fill: #0284c7;
  filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.8));
}

/* ==========================================
   KUTU ÇÖKERTME (COLLAPSE THE BOX)
   ========================================== */
.cokertme-sahne, .cokertme-sahne-standart {
  background: var(--surface); color: var(--text-color); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden;
}
.cokertme-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cokertme-govde, .cokertme-govde-standart {
  position: relative; width: 100%; min-height: 420px; padding: 20px 14px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.cokertme-grid-kapsayici {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
  width: 100%; max-width: min(92vw, 390px); aspect-ratio: 1 / 1;
  padding: 8px; background: var(--surface);
  border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.cokertme-hucre {
  position: relative; aspect-ratio: 1 / 1; border-radius: 5px;
  cursor: pointer; transition: transform .1s ease, filter .1s ease;
}
.cokertme-hucre:active {
  transform: scale(0.88);
}
.kutu-kirmizi {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.kutu-mavi {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.kutu-yesil {
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.kutu-sari {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.kutu-mor {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.kutu-bos {
  background: transparent !important; pointer-events: none; border: none; box-shadow: none;
}
.cokertme-hucre.vurgulu {
  transform: scale(0.92); filter: brightness(1.25);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  outline: 2px solid #f59e0b; z-index: 2;
}

/* ==========================================
   TEK KARE MAYIN TARLASI (ONE SQUARE MINESWEEPER)
   ========================================== */
.mayin-sahne, .mayin-sahne-standart {
  background: var(--surface); color: var(--text-color); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden;
}
.mayin-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.mayin-smiley-rozet {
  font-size: 1.6rem; line-height: 1; user-select: none;
  display: inline-block; transition: transform .1s ease;
}
.mayin-govde, .mayin-govde-standart {
  position: relative; width: 100%; min-height: 380px; padding: 24px 16px;
  display: flex; justify-content: center; align-items: center;
  background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.mayin-pencere {
  background: #c0c0c0; border: 4px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 16px; border-radius: 2px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.mayin-kare-alani {
  border: 4px solid; border-color: #808080 #ffffff #ffffff #808080;
  padding: 24px; background: #bdbdbd; display: flex;
  justify-content: center; align-items: center;
}
.mayin-kare {
  width: clamp(100px, 28vw, 140px); height: clamp(100px, 28vw, 140px);
  background: #c0c0c0; border: 6px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; outline: none; transition: background .05s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.mayin-kare:active {
  border-color: #808080 #ffffff #ffffff #808080;
}
.mayin-kare.kare-guvenli {
  border-color: #808080 #ffffff #ffffff #808080 !important;
  background: #c0c0c0;
}
.mayin-kare.kare-patladi {
  border-color: #808080 #ffffff #ffffff #808080 !important;
  background: #ef4444 !important;
}
.mayin-kare-icerik {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 900; font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1; user-select: none;
}
.mayin-kare-icerik.sayi-1 {
  color: #0000ff; text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.mayin-pencere.sallan {
  animation: mayinSallanti 0.45s ease-in-out;
}
@keyframes mayinSallanti {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-8px, 4px) rotate(-2deg); }
  40% { transform: translate(8px, -4px) rotate(2deg); }
  60% { transform: translate(-6px, 2px) rotate(-1deg); }
  80% { transform: translate(6px, -2px) rotate(1deg); }
}

/* ==========================================
   81 İL SAYMACA (SPORCLE BLITZ)
   ========================================== */
.saymaca-sahne, .saymaca-sahne-standart {
  background: var(--surface); color: var(--text-color); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden;
}
.saymaca-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.saymaca-govde, .saymaca-govde-standart {
  position: relative; width: 100%; min-height: 480px; padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.saymaca-input-alani {
  width: 100%; max-width: 480px; margin: 0 auto;
}
.saymaca-input {
  width: 100%; padding: 12px 18px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--border); color: var(--text-color);
  font-size: 1.05rem; font-weight: 600; text-align: center;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.saymaca-input:focus {
  border-color: #10b981; box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.saymaca-grid-kapsayici {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px; width: 100%; max-width: 820px; max-height: 420px;
  overflow-y: auto; padding: 10px; background: var(--surface);
  border-radius: 10px; border: 1px solid var(--border);
}
.saymaca-kart {
  height: 34px; border-radius: 6px; background: var(--surface-soft); color: var(--text-muted);
  display: flex; justify-content: center; align-items: center;
  font-size: .74rem; font-weight: 600; padding: 2px 4px; text-align: center;
  border: 1px solid var(--border); transition: background .2s, color .2s, transform .2s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saymaca-kart.kart-bulundu {
  background: #059669 !important; color: #ffffff !important;
  border-color: #10b981 !important; font-weight: 700;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}
.saymaca-kart.kart-kacirildi {
  background: #dc2626 !important; color: #ffffff !important;
  border-color: #ef4444 !important; font-weight: 700;
}
.saymaca-kart.anim-pop {
  animation: kartPop 0.3s ease-out;
}
@keyframes kartPop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ==========================================
   2 DAKİKA HİÇBİR ŞEY YAPMA (ZEN & SABIR TESTİ)
   ========================================== */
.zen-sahne, .zen-sahne-standart {
  background: var(--surface); color: var(--text-color); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden;
}
.zen-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.zen-govde, .zen-govde-standart {
  position: relative; width: 100%; min-height: 420px; padding: 28px 16px;
  display: flex; justify-content: center; align-items: center;
  background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: background .3s ease;
}
.zen-mod-kapsayici {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; background: var(--surface); padding: 4px;
  border-radius: 9999px; border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); z-index: 10;
}
.zen-govde.zen-basarisiz {
  background: #fee2e2 !important;
  animation: zenFlas 0.4s ease-in-out;
}
@keyframes zenFlas {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.zen-sayac-kapsayici {
  position: relative; width: clamp(200px, 50vw, 240px); height: clamp(200px, 50vw, 240px);
  display: flex; justify-content: center; align-items: center;
  user-select: none;
}
.zen-halka-svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
}
.zen-halka-zemin {
  fill: none; stroke: var(--border); stroke-width: 8;
}
.zen-halka-ilerleme {
  fill: none; stroke: var(--primary-color, #0284c7); stroke-width: 8;
  stroke-linecap: round; transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 8px rgba(2, 132, 199, 0.4));
}
.zen-zaman-merkez {
  position: absolute; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
}
.zen-zaman-sayi {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(2.2rem, 7vw, 3rem); font-weight: 800; color: var(--text-color);
  line-height: 1; letter-spacing: 1px;
}
.zen-zaman-alt {
  font-size: .82rem; color: var(--text-muted); font-weight: 600; margin-top: 6px;
}

/* ==========================================
   DÜŞEN RENKLİ KUM SANATI (THIS IS SAND)
   ========================================== */
.kum-sahne {
  background: #090c15; color: #f8fafc; border-radius: 12px; overflow: hidden;
}
.kum-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}
.kum-palet-secici {
  display: flex; align-items: center; gap: 8px;
}
.kum-renk-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
  padding: 0; outline: none;
}
.kum-renk-btn.aktif {
  transform: scale(1.25); border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.kum-govde {
  position: relative; width: 100%; min-height: 420px; padding: 18px 12px;
  display: flex; justify-content: center; align-items: center;
  background: #020617; touch-action: none; user-select: none;
}
.kum-tuval {
  width: 100%; max-width: min(92vw, 420px); aspect-ratio: 1 / 1;
  background: #0f0c08; border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: crosshair; touch-action: none;
}
.kum-ipucu-overlay {
  position: absolute; pointer-events: none;
  background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px);
  padding: 8px 16px; border-radius: 999px; font-size: .84rem;
  color: #e2e8f0; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.15);
  animation: pulse 1.5s infinite;
}
.kum-kontrol-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kum-tema-sec, .kum-eylemler {
  display: flex; align-items: center; gap: 6px;
}
.kum-tema-sec .btn.aktif {
  background: #f59e0b; border-color: #f59e0b; color: #000; font-weight: 700;
}

/* ==========================================
   İPEKSİ ÇİZİM & SİMETRİ SANATI (SILK ART)
   ========================================== */
.ipek-sahne {
  background: #060813; color: #f8fafc; border-radius: 12px; overflow: hidden;
}
.ipek-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}
.ipek-renk-paleti {
  display: flex; align-items: center; gap: 8px;
}
.ipek-renk-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
  padding: 0; outline: none;
}
.ipek-renk-btn.aktif {
  transform: scale(1.25); border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.ipek-govde {
  position: relative; width: 100%; min-height: 440px; padding: 16px 12px;
  display: flex; justify-content: center; align-items: center;
  background: #02040a; touch-action: none; user-select: none;
}
.ipek-tuval {
  width: 100%; max-width: min(94vw, 540px); aspect-ratio: 1 / 1;
  background: #060813; border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: crosshair; touch-action: none;
}
.ipek-ipucu-overlay {
  position: absolute; pointer-events: none;
  background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px);
  padding: 8px 16px; border-radius: 999px; font-size: .84rem;
  color: #e2e8f0; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.15);
  animation: pulse 1.5s infinite;
}
.ipek-kontrol-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ipek-ayarlar, .ipek-eylemler {
  display: flex; align-items: center; gap: 8px;
}
.ipek-ayarlar .btn.aktif {
  background: #00bcd4; border-color: #00bcd4; color: #000; font-weight: 700;
}

/* ==========================================
   MONDRİAN GEOMETRİK SANAT (MONDRIAN & ME)
   ========================================== */
.mondrian-sahne {
  background: #0b0f19; color: #f8fafc; border-radius: 12px; overflow: hidden;
}
.mondrian-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(220, 38, 38, 0.25);
}
.mondrian-palet {
  display: flex; align-items: center; gap: 8px;
}
.mondrian-renk-btn {
  width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
  padding: 0; outline: none;
}
.mondrian-renk-btn.aktif {
  transform: scale(1.25); border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.mondrian-govde {
  position: relative; width: 100%; min-height: 440px; padding: 20px 14px;
  display: flex; justify-content: center; align-items: center;
  background: #020617; user-select: none;
}
.mondrian-tuval-kapsayici {
  width: 100%; max-width: min(92vw, 420px); aspect-ratio: 1 / 1;
  border: 8px solid #0f172a; background: #ffffff;
  display: flex; position: relative; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
}
.mondrian-blok {
  cursor: pointer; transition: filter .1s ease;
}
.mondrian-blok:hover {
  filter: brightness(0.94);
}
.cizgi-dikey {
  width: 6px; background: #0f172a; flex-shrink: 0;
}
.cizgi-yatay {
  height: 6px; background: #0f172a; flex-shrink: 0;
}
.mondrian-kontrol-cubuk {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 12px 18px; background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mondrian-eylemler-sol, .mondrian-eylemler-sag {
  display: flex; align-items: center; gap: 8px;
}

/* Dans Eden Kurtçuk (Staggering Beauty Uyarlaması) */
.kurtcuk-sahne, .kurtcuk-sahne-standart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.kurtcuk-cubuk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.kurtcuk-durum-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--surface-soft);
  color: var(--text-muted);
  transition: all 0.2s ease;
}
.kurtcuk-durum-etiket.parti-aktif {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
  animation: kurtcukNabiz 0.8s infinite alternate ease-in-out;
}
@keyframes kurtcukNabiz {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.08); filter: brightness(1.25); }
}
.kurtcuk-govde, .kurtcuk-govde-standart {
  position: relative;
  width: 100%;
  height: 480px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.kurtcuk-govde:active {
  cursor: grabbing;
}
.kurtcuk-tuval {
  width: 100%;
  height: 100%;
  display: block;
}
.kurtcuk-ipucu-overlay {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-color);
  font-size: 0.85rem;
  font-weight: 500;
  pointer-events: none;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease;
}
.kurtcuk-alt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Fizik Koşucusu (QWOP Atletizm Koşusu) */
.qwop-sahne, .qwop-sahne-standart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.qwop-cubuk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.qwop-govde, .qwop-govde-standart {
  position: relative;
  width: 100%;
  height: 420px;
  max-height: 65vh;
  background: #000;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.qwop-tuval {
  width: 100%;
  height: 100%;
  display: block;
}
.qwop-sanal-tuslar {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  z-index: 10;
}
.qwop-tus-grup {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.qwop-tus-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(54px, 14vw, 68px);
  height: clamp(54px, 14vw, 68px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.08s ease, background-color 0.08s ease, border-color 0.08s ease;
}
.qwop-tus-btn b {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.qwop-tus-btn small {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.qwop-tus-btn:active,
.qwop-tus-btn.aktif {
  background: linear-gradient(135deg, #ea580c, #f97316);
  border-color: #ffedd5;
  color: #fff;
  transform: scale(0.92);
  box-shadow: 0 0 16px rgba(234, 88, 12, 0.7);
}
.qwop-tus-btn.aktif small {
  color: #fff;
}
.qwop-alt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────────────────────────
   Faz 3 & 5 — Kalan 7 Araç Stilleri (2026-09-21)
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Kaydırma Metresi (Scroll-O-Meter) */
.scroll-meter-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  min-height: 380px;
  user-select: none;
}
.scroll-meter-gosterge {
  text-align: center;
}
.scroll-meter-sayi {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  font-family: var(--font-display, inherit);
  color: #8b5cf6;
  line-height: 1.1;
}
.scroll-meter-birim {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}
.scroll-meter-bilgi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-meter-sure {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  padding: 6px 18px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.scroll-meter-ipucu {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
}
.scroll-meter-bar-kap {
  width: min(100%, 360px);
  height: 10px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.scroll-meter-bar {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  transition: width 0.1s linear;
}

/* 2. Patates mi Domates mi? (İkilem Refleksi) */
.ikilem-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  min-height: 380px;
  user-select: none;
}
.ikilem-ust {
  display: flex;
  justify-content: space-between;
  width: min(100%, 420px);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.ikilem-soru-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 420px);
  min-height: 170px;
  padding: 24px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  text-align: center;
  transition: all 0.2s ease;
}
.ikilem-kategori {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ikilem-nesne {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.ikilem-dogru {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.ikilem-yanlis {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
.ikilem-butonlar {
  display: flex;
  gap: 16px;
  width: min(100%, 420px);
}
.ikilem-btn {
  flex: 1;
  padding: 16px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: var(--radius-md, 12px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.ikilem-btn:active {
  transform: scale(0.96);
}
.ikilem-btn-evet {
  background: #10b981;
  color: #fff;
}
.ikilem-btn-hayir {
  background: #ef4444;
  color: #fff;
}

/* 3. Ekran Ölü Piksel Testi */
.piksel-tester-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
}
.piksel-tester-bilgi {
  max-width: 540px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.piksel-tester-ikon {
  font-size: 3rem;
  color: #64748b;
}
.piksel-tester-bilgi h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.piksel-nasil {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
  background: var(--bg);
  padding: 14px 18px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border);
}
.piksel-renk-onizleme {
  display: flex;
  gap: 10px;
  margin: 8px 0;
}
.piksel-renk-chip {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.piksel-baslat-btn {
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease;
}
.piksel-baslat-btn:hover {
  transform: translateY(-2px);
}

/* 4. Hedef Sayı & 4 İşlem Bulmacası */
.hedefsayi-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  min-height: 400px;
}
.hedefsayi-ust {
  display: flex;
  justify-content: space-between;
  width: min(100%, 460px);
  font-weight: 600;
  color: var(--text-muted);
}
.hedefsayi-hedef {
  text-align: center;
  padding: 16px 32px;
  background: var(--bg);
  border: 2px dashed #0891b2;
  border-radius: var(--radius-lg, 16px);
}
.hedefsayi-hedef-etiket {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0891b2;
  letter-spacing: 0.05em;
}
.hedefsayi-hedef-sayi {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.hedefsayi-kaynaklar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.hedefsayi-kaynak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: #0891b2;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 10px;
}
.hedefsayi-islemler {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
}
.hedefsayi-giris-kap {
  display: flex;
  gap: 10px;
  width: min(100%, 460px);
}
.hedefsayi-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: monospace;
}
.hedefsayi-kontrol-btn {
  padding: 12px 20px;
  background: #0891b2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.hedefsayi-sonuc {
  min-height: 24px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.hedefsayi-pas-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

/* 5. Odaklanma & Beyaz Gürültü Mikseri */
.gurultu-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  max-width: 680px;
  margin: 0 auto;
}
.gurultu-baslik {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gurultu-aciklama {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 520px;
  margin: 0;
}
.gurultu-kanallar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  width: 100%;
}
.gurultu-kanal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.gurultu-kanal-ikon {
  font-size: 1.3rem;
}
.gurultu-kanal-ad {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  min-width: 100px;
}
.gurultu-slider {
  flex: 1;
  accent-color: #6366f1;
}
.gurultu-kanal-deger {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}
.gurultu-kontroller {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.gurultu-btn {
  padding: 12px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #6366f1;
  color: #fff;
  transition: transform 0.15s ease;
}
.gurultu-btn-aktif {
  background: #ef4444;
}
.gurultu-sure-sec {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
}
.gurultu-durum {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6366f1;
  min-height: 20px;
}
.gurultu-presetler {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85rem;
}
.gurultu-preset-etiket {
  color: var(--text-muted);
  font-weight: 600;
}
.gurultu-preset {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.gurultu-preset:hover {
  background: var(--surface);
  border-color: #6366f1;
}

/* 6. Kripto Cümle Çözücü */
.kripto-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  min-height: 400px;
}
.kripto-ust {
  display: flex;
  justify-content: space-between;
  width: min(100%, 520px);
  font-weight: 600;
  color: var(--text-muted);
}
.kripto-sifreli {
  width: min(100%, 520px);
  padding: 20px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  text-align: center;
}
.kripto-etiket {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 8px;
}
.kripto-metin {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.4;
  word-break: break-word;
}
.kripto-ipucu {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.kripto-giris-kap {
  display: flex;
  gap: 10px;
  width: min(100%, 520px);
}
.kripto-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1.05rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.kripto-kontrol-btn {
  padding: 12px 20px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.kripto-sonuc {
  min-height: 24px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.kripto-alt-kontrol {
  display: flex;
  gap: 16px;
}
.kripto-ipucu-btn,
.kripto-pas-btn {
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}

/* 7. Kelime Merdiveni */
.merdiven-kap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  min-height: 420px;
}
.merdiven-ust {
  display: flex;
  justify-content: space-between;
  width: min(100%, 460px);
  font-weight: 600;
  color: var(--text-muted);
}
.merdiven-hedef-kutu {
  text-align: center;
  padding: 16px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
}
.merdiven-bas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1.5rem;
  font-weight: 800;
}
.merdiven-kelime-bas {
  color: #0d9488;
}
.merdiven-kelime-hedef {
  color: #6366f1;
}
.merdiven-ok {
  color: var(--text-muted);
}
.merdiven-aciklama {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.merdiven-adimlar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 320px);
}
.merdiven-adim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
}
.merdiven-adim-no {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.merdiven-adim-kelime {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--text);
}
.merdiven-adim-bas {
  border-color: #0d9488;
}
.merdiven-adim-hedef {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}
.merdiven-giris-kap {
  display: flex;
  gap: 10px;
  width: min(100%, 320px);
}
.merdiven-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0.1em;
}
.merdiven-ekle-btn {
  padding: 10px 18px;
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.merdiven-sonuc {
  min-height: 22px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.merdiven-basari {
  font-size: 1.1rem;
  font-weight: 700;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 8px;
}
.merdiven-alt-kontrol {
  display: flex;
  gap: 16px;
}
.merdiven-geri-btn,
.merdiven-pas-btn {
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.merdiven-ipucu {
  font-size: 0.85rem;
  color: var(--text-muted);
}