/* Yerleşim: Üstte harf ıstakası ve tahta kutusu, altında harf sayısına göre
   yan yana sütunlar (telefonda sekmeler). Sayfa değil, listeler kendi içinde kayar.
   Görünüm "Gece Mavisi": lacivertten yeşile geçen koyu zemin, cam gibi yarı saydam
   kutular, parlak nane (ana renk), mercan (joker) ve gök mavisi (tahtadaki harf). */
:root {
  --zemin-1: #0C1A3A;
  --zemin-2: #0D3550;
  --zemin-3: #0D5A57;
  --parilti-mercan: rgb(255 110 96 / .30);
  --parilti-nane: rgb(46 230 190 / .22);

  --cam: rgb(255 255 255 / .075);
  --cam-guclu: rgb(255 255 255 / .11);
  --cam-kenar: rgb(255 255 255 / .14);
  --cam-cizgi: rgb(255 255 255 / .10);
  --cukur: rgb(0 0 0 / .28);

  --yazi: #EEF8F6;
  --soluk: #A7C2C5;
  --silik: #7F9DA2;

  --nane: #3EE0C1;
  --nane-parlak: #6FF0D6;
  --nane-zemin: rgb(62 224 193 / .16);
  --nane-uzeri: #052823;
  --mercan-1: #FF8A6B;
  --mercan-2: #FF4F6D;
  --mercan-yazi: #FF9284;
  --mercan-zemin: rgb(255 120 110 / .16);
  --altin: #FFC15E;
  --gok: #8FD3FF;
  --logo-mavi: #4DB8FF;
  --logo-turuncu: #FFB547;

  --tas: #FFF8E6;
  --tas-kenar: #E6CF95;
  --tas-yazi: #2A2416;
  --tas-bag: #CFEFFF;
  --tas-bag-kenar: #8CC4E8;
  --tas-golge: 0 2px 5px rgb(0 0 0 / .35);

  --yazi-baslik: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --yazi-govde: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --yaricap: 16px;
  --tas-boy: 46px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--zemin-1); }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(55% 45% at 100% 0%, var(--parilti-mercan), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, var(--parilti-nane), transparent 70%),
    linear-gradient(165deg, var(--zemin-1) 0%, var(--zemin-2) 50%, var(--zemin-3) 100%);
  background-attachment: fixed;
  color: var(--yazi);
  font: 400 16px/1.5 var(--yazi-govde);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--nane); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Cam kutu: panel, sonuç sütunları ve bilgi bölümü */
.cam {
  background: var(--cam);
  border: 1px solid var(--cam-kenar);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- Ana çerçeve ---------- */
.uygulama {
  height: 100dvh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 16px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: 1440px;
  margin: 0 auto;
}

.ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Logo: uçak çizimi + KelimePilot.com yazısı */
.marka { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex: none; }
.marka-logo { display: block; height: 48px; width: auto; margin: -6px 0 -6px -4px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .25)); }
.marka-ad {
  font: 800 26px/1 "Baloo 2", var(--yazi-baslik); letter-spacing: -0.01em; white-space: nowrap;
  color: #FFFFFF; text-shadow: 0 .06em 0 rgb(4 18 40 / .55);
  padding-top: .14em; /* yazı tipinin üst boşluğunu dengeler */
}
.marka-ad b { font-weight: inherit; color: var(--logo-mavi); }
.marka-ad i { font-style: normal; font-size: .6em; color: var(--logo-turuncu); }
@media (min-width: 681px) {
  .ust .marka-logo { height: 58px; margin: -8px 0 -8px -2px; }
  .ust .marka-ad { font-size: 30px; }
}
.ust-not { margin: 0; color: var(--soluk); font-size: 14px; }

/* ---------- Arama paneli ---------- */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px 22px;
  padding: 18px 20px 16px;
  border-radius: 24px;
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / .6);
}
.alan { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.etiket { font: 700 14px/1.2 var(--yazi-govde); color: var(--soluk); }
.istege { font-weight: 500; color: var(--silik); }
.ipucu { margin: 0; font-size: 13px; color: var(--silik); align-self: center; }

/* Istaka: harf taşlarının dizildiği çukur ray */
.istaka {
  position: relative;
  display: flex; align-items: center;
  min-height: calc(var(--tas-boy) + 18px);
  padding: 9px 112px 9px 10px;
  border-radius: var(--yaricap);
  background: var(--cukur);
  box-shadow: inset 0 2px 10px rgb(0 0 0 / .35);
  border: 1px solid transparent;
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.istaka:focus-within { border-color: var(--nane); box-shadow: inset 0 2px 10px rgb(0 0 0 / .35), 0 0 0 4px rgb(62 224 193 / .18); }
.istaka-bag { padding-right: 46px; min-height: calc(var(--tas-boy) + 2px); flex: 1 1 140px; }
.istaka-bag .tas { --tas-boy: 36px; }

.gizli-girdi {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; /* iOS yakınlaştırmasın */
  caret-color: transparent; background: transparent;
  cursor: text; z-index: 0;
}
.gizli-girdi:focus-visible { outline: none; }

.taslar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; pointer-events: none; }
.tas {
  position: relative;
  flex: 0 1 var(--tas-boy);
  min-width: 24px;
  aspect-ratio: 1;
  max-width: var(--tas-boy);
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tas);
  color: var(--tas-yazi);
  box-shadow: inset 0 -3px 0 var(--tas-kenar), var(--tas-golge);
  font: 800 calc(var(--tas-boy) * .5)/1 var(--yazi-baslik);
}
.tas small {
  position: absolute; right: 9%; bottom: 11%;
  font: 700 calc(var(--tas-boy) * .2)/1 var(--yazi-govde);
}
.tas.joker { background: linear-gradient(160deg, var(--mercan-1), var(--mercan-2)); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), var(--tas-golge); }
.tas.joker svg { width: 50%; height: 50%; fill: currentColor; }
.tas.bag { background: var(--tas-bag); box-shadow: inset 0 -3px 0 var(--tas-bag-kenar), var(--tas-golge); }
.taslar .tas[data-sira] { pointer-events: auto; cursor: pointer; transition: transform .12s; }
.taslar .tas[data-sira]:hover { transform: translateY(-2px); }
.taslar .tas[data-sira]:active { transform: scale(.94); }
.tas.yeni { animation: tas-gel .18s ease-out; }
@keyframes tas-gel { from { transform: translateY(-8px) scale(.9); opacity: .3; } }

.bos-ray { color: var(--silik); font-size: 15px; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imlec { width: 2px; height: 58%; background: var(--nane); border-radius: 2px; opacity: 0; flex: none; }
.istaka:focus-within .imlec { animation: imlec 1s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 1; } }

.sil {
  position: absolute; right: 9px; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--cam-kenar); border-radius: 999px;
  background: var(--cam-guclu); color: var(--soluk);
  font-size: 14px; font-weight: 600;
  z-index: 2;
}
.sil svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.sil:hover { color: var(--mercan-yazi); border-color: var(--mercan-yazi); }
.sil-kucuk { width: 30px; height: 30px; padding: 0; justify-content: center; right: 7px; }

.bag-satiri { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

/* İçinde / Başta / Sonda seçimi */
.secim {
  display: flex; flex: 1 0 auto;
  padding: 4px; gap: 4px;
  border-radius: var(--yaricap);
  background: var(--cam);
  border: 1px solid var(--cam-cizgi);
}
.secim label { flex: 1; position: relative; display: flex; }
.secim input { position: absolute; opacity: 0; pointer-events: none; }
.secim span {
  flex: 1; display: grid; place-items: center;
  min-height: 40px; padding: 0 12px; border-radius: 12px; white-space: nowrap;
  font-weight: 600; font-size: 15px; color: var(--soluk);
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.secim span:hover { background: var(--cam); color: var(--yazi); }
.secim input:checked + span { background: var(--nane); color: var(--nane-uzeri); font-weight: 800; box-shadow: 0 6px 16px -6px rgb(62 224 193 / .75); }
.secim input:focus-visible + span { outline: 3px solid var(--nane); outline-offset: 1px; }

/* Türkçe harf çubuğu */
.harf-cubugu { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.harf-cubugu button {
  min-width: 50px; height: 50px; padding: 0 12px;
  border: 1px solid var(--cam-kenar); border-radius: 13px;
  background: var(--cam); color: var(--yazi);
  font: 800 22px/1 var(--yazi-baslik);
  display: inline-grid; place-items: center;
  touch-action: manipulation;
}
.harf-cubugu button:hover { border-color: var(--nane); background: var(--nane-zemin); }
.harf-cubugu button:active { transform: translateY(1px); }
.harf-cubugu .cubuk-joker { background: linear-gradient(120deg, var(--mercan-1), var(--mercan-2)); color: #fff; border-color: transparent; font-size: 17px; padding: 0 16px; }
.harf-cubugu svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Düzenli panel yerleşimi ----------
   Geniş ekran:  [ Harfler ............ ]  [ Kelimede geçsin ...... ]
                 [ taşlar          ✕   ]  [ taş ✕ | İçinde|Başta|Sonda ]
                 [ Ç  Ğ  I  İ  Ö  Ş  Ü  Joker  ⌫  (tam genişlik)   ]
   İki sütun aynı hizada başlar, kutular aynı yükseklikte, harf çubuğu
   panelin iki kenarına tam oturur. */
.panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px 22px; padding: 20px 22px; }
.etiket-satiri { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 18px; }
.etiket-satiri .ipucu { align-self: baseline; text-align: right; }
.istaka, .istaka-bag { min-height: 68px; }
.bag-satiri { flex-wrap: nowrap; }
.istaka-bag { flex: 1 1 120px; min-width: 0; }
.secim { flex: 0 0 auto; }
.harf-cubugu {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 8px;
}
.harf-cubugu button { width: 100%; min-width: 0; height: 48px; padding: 0 4px; }

/* ---------- Sonuçlar ---------- */
.govde { flex: 1; min-height: 0; display: flex; gap: 16px; }
.sonuclar { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.sonuc-ust { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.ozet { margin: 0; font-size: 15px; color: var(--soluk); min-height: 1.5em; }
.ozet b { color: var(--yazi); font-weight: 800; }
.ozet .birlikte { white-space: nowrap; }
.ozet .en-iyi { font: 800 15.5px/1 var(--yazi-baslik); color: var(--yazi); letter-spacing: .04em; }
.ozet .en-iyi-puan { color: var(--altin); font-weight: 800; }
.anahtar { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--soluk); }
.anahtar span { display: inline; }
.anahtar b { font-weight: 800; padding: 0 2px; }

.sutunlar {
  flex: 1; min-height: 0;
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--cam-kenar) transparent;
}
.sutunlar.tasiyor { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.sutunlar.yukleniyor { opacity: .6; transition: opacity .12s .08s; }

.grup {
  flex: 1 0 220px;
  max-width: 330px;
  display: flex; flex-direction: column; min-height: 0;
  align-self: flex-start;
  max-height: 100%;
  border-radius: 20px;
  scroll-snap-align: start;
  overflow: hidden;
}
.grup-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--cam-cizgi);
}
.grup-baslik h2 { margin: 0; font: 800 18px/1.1 var(--yazi-baslik); letter-spacing: -0.01em; }
.grup-baslik span {
  font-size: 12.5px; font-weight: 700; color: var(--nane-parlak);
  background: var(--nane-zemin); padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.liste { list-style: none; margin: 0; padding: 6px 6px 8px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--cam-kenar) transparent; }
.liste li {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 5px 8px 5px 10px; border-radius: 11px;
}
.liste li:nth-child(odd) { background: rgb(255 255 255 / .035); }
.liste li:hover { background: var(--cam-guclu); }
.liste li[data-anlam] { cursor: pointer; }
.liste li[data-anlam]:focus-visible { outline: 2px solid var(--nane); outline-offset: -2px; }

/* ---------- Kelime anlamı penceresi ---------- */
body.pencere-acik { overflow: hidden; }
.anlam-perde {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgb(3 10 24 / .6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: perde-gel .15s ease-out;
}
@keyframes perde-gel { from { opacity: 0; } }
.anlam-kutu {
  position: relative; width: min(560px, 100%); max-height: min(80vh, 640px); overflow-y: auto;
  padding: 22px 22px 18px; border-radius: 22px;
  background: linear-gradient(180deg, #17304A, #11283A);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7);
  display: grid; gap: 12px;
}
.anlam-kapat {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--cam-kenar); background: var(--cam); color: var(--soluk);
  display: grid; place-items: center;
}
.anlam-kapat svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.anlam-kapat:hover { color: var(--yazi); }
.anlam-icerik { display: grid; gap: 12px; }
.anlam-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 44px; }
.anlam-taslar { display: flex; flex-wrap: wrap; gap: 5px; }
.anlam-taslar .tas { --tas-boy: 40px; width: 40px; flex: none; }
.anlam-puan {
  display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: linear-gradient(120deg, var(--altin), var(--mercan-1)); color: #2A1205; font: 800 15px/1 var(--yazi-govde);
}
.anlam-puan small { font-size: 11.5px; font-weight: 700; opacity: .8; }
.anlam-tur { justify-self: start; padding: 2px 9px; border-radius: 6px; background: var(--nane-zemin); color: var(--nane-parlak); font-size: 13px; font-weight: 700; }
.anlam-liste { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.anlam-liste li::marker { color: var(--nane); font-weight: 800; }
.anlam-liste:has(li:only-child) { padding-left: 0; list-style: none; }
.anlam-ornek { margin: 0; font-style: italic; color: var(--soluk); font-size: 14.5px; }
.anlam-kaynak { margin: 4px 0 0; font-size: 12px; color: var(--silik); }
.anlam-yok, .anlam-yukleniyor { margin: 0; color: var(--soluk); }
@media (max-width: 680px) {
  .anlam-perde { place-items: end stretch; padding: 0; }
  .anlam-kutu { width: 100%; max-height: 82vh; border-radius: 22px 22px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); animation: alttan .2s ease-out; }
  @keyframes alttan { from { transform: translateY(30px); opacity: .5; } }
}
.kelime {
  font: 700 17px/1.25 var(--yazi-baslik);
  letter-spacing: .05em;
  min-width: 0; overflow-wrap: anywhere;
}
.j { color: var(--mercan-yazi); }
.t { color: var(--gok); background: rgb(143 211 255 / .14); border-radius: 4px; }
.puan {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 3px;
  height: 28px; padding: 0 10px; align-items: center;
  border-radius: 999px;
  background: var(--nane-zemin); color: var(--nane-parlak);
  font: 800 15px/1 var(--yazi-govde);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.puan small { font-size: 11.5px; font-weight: 700; opacity: .8; }
.liste li:first-child .puan { background: linear-gradient(120deg, var(--altin), var(--mercan-1)); color: #2A1205; }
.daha {
  margin: 4px 10px 12px; padding: 10px; border: 1px solid var(--cam-kenar); border-radius: 12px;
  background: var(--cam); color: var(--nane-parlak); font-weight: 700; font-size: 14px;
}
.daha:hover { background: var(--nane-zemin); }

/* ---------- Karşılama: henüz harf yazılmamışken ----------
   Sayfa tek ekrana kilitlenmez, tanıtım kartlarının hemen altında
   bilgi bölümleri devam eder; arada boşluk kalmaz. */
body.bos-durum .uygulama { height: auto; min-height: 0; }
body.bos-durum .govde { display: block; }
body.bos-durum .sutunlar { flex: none; }
body.bos-durum .sutunlar { overflow: visible; padding-bottom: 0; mask-image: none; display: block; }
body.bos-durum .sonuc-ust { display: none; }
body.bos-durum #son-aramalar-bolum { display: none; }
body.bos-durum .bilgi { margin-top: 20px; }

.karsilama { display: grid; gap: 18px; padding: 4px 0 0; max-width: none; }
.adim-kartlari {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.adim {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px;
  padding: 18px 20px 20px; border-radius: 20px;
}
.adim-no {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nane); color: var(--nane-uzeri);
  font: 800 14px/1 var(--yazi-govde);
}
.adim h2 { margin: 6px 0 0; font: 800 19px/1.2 var(--yazi-baslik); letter-spacing: -0.01em; }
.adim p { margin: 0; font-size: 14.5px; color: var(--soluk); }
.adim-gorsel {
  margin-top: 10px; min-height: 58px; padding: 9px 10px;
  display: flex; align-items: center; gap: 6px;
  border-radius: 14px; background: var(--cukur);
}
.adim-gorsel .tas { --tas-boy: 38px; width: 38px; flex: none; }
.adim-cip {
  margin-left: 6px; padding: 8px 12px; border-radius: 10px;
  background: var(--nane); color: var(--nane-uzeri); font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
.adim-sonuc { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 0 6px; }
.adim-sonuc .puan { background: linear-gradient(120deg, var(--altin), var(--mercan-1)); color: #2A1205; }
.karsilama-alt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.karsilama-aramalar { display: grid; gap: 12px; align-content: start; padding: 18px 20px 20px; border-radius: 20px; }
.karsilama-aramalar .ornekler { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

/* Günün kelimesi */
.gunun { display: grid; gap: 12px; align-content: start; padding: 18px 20px 20px; border-radius: 20px; }
.bilgi-ic.gunun { padding: 26px clamp(18px, 3vw, 32px); border-radius: 22px; }
.gunun-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gunun-ust h2 { margin: 0; font: 800 19px/1.2 var(--yazi-baslik); letter-spacing: -0.01em; }
.bilgi-ic.gunun .gunun-ust h2 { font-size: 24px; letter-spacing: -0.02em; }
.gunun-puan {
  display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(120deg, var(--altin), var(--mercan-1)); color: #2A1205;
  font: 800 16px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
}
.gunun-puan small { font-size: 12px; font-weight: 700; opacity: .8; }
.gunun-taslar { display: flex; flex-wrap: wrap; gap: 6px; }
.gunun-taslar .tas { --tas-boy: 46px; width: 46px; flex: none; }
.gunun-anlam { margin: 0; font-size: 16px; line-height: 1.5; color: var(--yazi); max-width: 70ch; }
.gunun-tur {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px;
  background: var(--nane-zemin); color: var(--nane-parlak); font-size: 12.5px; font-weight: 700; vertical-align: 2px;
}
.gunun-ornek { margin: 0; font-size: 14.5px; font-style: italic; color: var(--soluk); max-width: 70ch; }
.gunun-dugme {
  justify-self: start; height: 40px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--cam-kenar); background: var(--cam-guclu); color: var(--yazi);
  font-weight: 700; font-size: 14px;
}
.gunun-dugme:hover { border-color: var(--nane); color: var(--nane-parlak); }
.karsilama-etiket { margin: 0; font: 800 19px/1.2 var(--yazi-baslik); letter-spacing: -0.01em; color: var(--yazi); }

@media (max-width: 860px) {
  .karsilama-alt { grid-template-columns: minmax(0, 1fr); }
  .karsilama-aramalar .ornekler { flex-direction: row; }
  .gunun-taslar .tas { --tas-boy: 40px; width: 40px; }
  .adim-kartlari { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .adim { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; column-gap: 14px; row-gap: 4px; padding: 14px 16px; }
  .adim-no { grid-row: 1 / span 3; }
  .adim h2 { margin: 2px 0 0; font-size: 17px; }
  .adim-gorsel { margin-top: 6px; min-height: 52px; }
  .adim-gorsel .tas { --tas-boy: 34px; width: 34px; }
}

/* Boş durumlar */
.sonuc-yok {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(16px, 4vh, 40px) 8px; max-width: 580px;
}
.sonuc-yok h2 { margin: 0; font: 800 clamp(23px, 3vw, 32px)/1.15 var(--yazi-baslik); letter-spacing: -0.02em; text-wrap: balance; }
.sonuc-yok p { margin: 0; color: var(--soluk); }
.ornekler { display: flex; flex-wrap: wrap; gap: 10px; }
.ornek {
  display: inline-flex; gap: 4px; padding: 7px; border-radius: 14px;
  background: var(--cukur); border: 1px solid var(--cam-kenar);
}
.ornek .tas { --tas-boy: 30px; width: 30px; flex: none; }
.ornek .tas small { display: none; }
.ornek:hover { border-color: var(--nane); }

.sekmeler { display: none; }

/* ---------- Reklam alanları (ayarlar.js ile açılır) ---------- */
.reklam { display: grid; place-items: center; overflow: hidden; }
.reklam-ust { min-height: 60px; }
.reklam-yan { flex: 0 0 300px; }
.reklam-alt { margin-top: 24px; min-height: 100px; }

/* ---------- Bilgi bölümü ---------- */
.bilgi {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  margin: 28px auto 0;
  max-width: 1440px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.bilgi-ic {
  margin: 0;
  padding: 26px clamp(18px, 3vw, 32px) 26px;
  border-radius: 22px;
}
.bilgi h2 { font: 800 24px/1.2 var(--yazi-baslik); letter-spacing: -0.02em; margin: 0 0 14px; }
.bilgi h2:not(:first-child) { margin-top: 34px; }
.adimlar { margin: 0; padding-left: 22px; display: grid; gap: 10px; max-width: 68ch; color: var(--soluk); }
.adimlar strong { color: var(--yazi); }
.adimlar li::marker { font-weight: 800; color: var(--nane); }
.puan-tablosu { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.puan-tablosu .tas { --tas-boy: 44px; width: 100%; max-width: 64px; }
.not { color: var(--silik); font-size: 14px; margin: 14px 0 0; }
.bilgi-ic { width: 100%; min-width: 0; }
.bilgi-ic h2 + .ust-not-bilgi { margin: -6px 0 16px; font-size: 15px; color: var(--soluk); }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Son aramalar */
.son-aramalar { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sonuç başlığındaki "Kelime eksik mi?" bağlantısı */
.eksik-baglanti { font-size: 13.5px; color: var(--nane-parlak); text-underline-offset: 3px; }
.bildir-baglanti { color: var(--nane-parlak); }

/* Eksik kelime bildirme */
.oneri-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.oneri-form input {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px;
  border-radius: var(--yaricap); border: 1px solid var(--cam-kenar);
  background: var(--cukur); color: var(--yazi);
  font: 800 20px/1 var(--yazi-baslik); letter-spacing: .08em;
}
.oneri-form input::placeholder { color: var(--silik); font-weight: 500; font-size: 16px; letter-spacing: 0; font-family: var(--yazi-govde); }
.oneri-form input:focus-visible { outline: none; border-color: var(--nane); box-shadow: 0 0 0 4px rgb(62 224 193 / .18); }
.oneri-form button {
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--yaricap);
  background: var(--nane); color: var(--nane-uzeri); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 20px -10px rgb(62 224 193 / .8);
}
.oneri-form button:disabled { opacity: .6; cursor: wait; }
.oneri-durum { margin: 12px 0 0; min-height: 1.5em; font-size: 14.5px; color: var(--soluk); }
.oneri-durum.basari { color: var(--nane-parlak); }
.oneri-durum.hata { color: var(--mercan-yazi); }
.oneri-durum.bilgi { color: var(--gok); }

/* Uygulama mağazaları */
.magaza-satiri { display: flex; flex-wrap: wrap; gap: 12px; }
.magaza {
  display: inline-flex; align-items: center; gap: 12px;
  flex: 1 1 210px; max-width: 320px; padding: 12px 20px 12px 16px;
  border-radius: 16px; border: 1px solid var(--cam-kenar);
  background: rgb(0 0 0 / .32); color: var(--yazi); text-decoration: none;
}
.magaza svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.magaza span { display: flex; flex-direction: column; font: 800 17px/1.15 var(--yazi-baslik); }
.magaza small { font: 600 12px/1.3 var(--yazi-govde); color: var(--altin); }
.magaza[aria-disabled="true"] { cursor: default; }
a.magaza[href]:hover { border-color: var(--nane); }
.resmi-rozet { display: inline-flex; align-items: center; }
.resmi-rozet img { display: block; height: 52px; width: auto; }
.resmi-android img { height: 78px; margin: -13px -10px; } /* Google rozetinin kendi boşluğunu dengeler */

/* Üst menü: ileride yeni araçlar buraya eklenecek */
.menu { display: flex; gap: 6px; flex-wrap: wrap; }
.menu a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 14px; color: var(--soluk);
  border: 1px solid transparent;
}
.menu a:hover { color: var(--yazi); background: var(--cam); }
.menu a[aria-current="page"] { color: var(--yazi); background: var(--cam-guclu); border-color: var(--cam-kenar); }


/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .reklam-yan { display: none !important; }
  .ust-not { display: none; }
}

/* ---------- Telefon: sekmeli tek liste ---------- */
@media (max-width: 680px) {
  :root { --tas-boy: 40px; }
  .uygulama { gap: 10px; padding-block: 12px 0; min-height: 480px; }
  .marka-ad { font-size: 22px; }
  .marka-logo { height: 42px; }
  .panel { padding: 14px 12px 12px; gap: 10px; border-radius: 22px; }
  .alan-harf .ipucu { display: none; }
  .istaka { padding-right: 50px; }
  .sil:not(.sil-kucuk) { width: 34px; padding: 0; justify-content: center; }
  .sil span { display: none; }
  .istaka, .istaka-bag { min-height: 58px; }
  .istaka-bag { flex: 0 0 30%; padding-right: 36px; }
  .istaka-bag .bos-ray { font-size: 13px; }
  .secim { flex: 1 1 auto; min-width: 0; }
  .secim label { min-width: 0; }
  .secim span { padding: 0 2px; font-size: 14px; }
  .eksik-baglanti { display: none; }
  .secim span { min-height: 36px; font-size: 14.5px; }
  .harf-cubugu { gap: 5px; }
  .harf-cubugu button { height: 46px; font-size: 21px; }
  .harf-cubugu .cubuk-joker { font-size: 14px; padding: 0 2px; }
  .harf-cubugu .cubuk-joker { flex: 1.6 1 0; }
  .harf-cubugu .cubuk-geri { flex: 1.2 1 0; }

  .anahtar { font-size: 12.5px; gap: 12px; }
  .sekmeler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .sekmeler::-webkit-scrollbar { display: none; }
  .sekme {
    flex: none; display: inline-flex; align-items: baseline; gap: 6px;
    min-height: 40px; padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--cam-kenar);
    background: var(--cam); color: var(--yazi); font-weight: 800; font-size: 14.5px;
  }
  .sekme small { font-weight: 600; color: var(--soluk); font-size: 12.5px; }
  .sekme[aria-selected="true"] { background: linear-gradient(120deg, var(--mercan-1), var(--mercan-2)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgb(255 79 109 / .8); }
  .sekme[aria-selected="true"] small { color: inherit; opacity: .85; }

  .sutunlar { overflow: hidden; padding-bottom: 10px; mask-image: none; }
  .grup { flex: 1 1 100%; max-width: none; display: none; }
  .grup.secili { display: flex; }
  .kelime { font-size: 18px; }
}

/* Dar telefonlarda tahta kutusu ve İçinde/Başta/Sonda alt alta */
@media (max-width: 420px) {
  .bag-satiri { flex-wrap: wrap; }
  .istaka-bag { flex: 1 1 100%; }
  .secim { flex: 1 1 100%; }
  .secim span { font-size: 14px; padding: 0 4px; }
}

/* Dokunmatik ekranda harf çubuğu sadece yazarken görünür */
@media (pointer: coarse) {
  .harf-cubugu { display: none; }
  .panel:focus-within .harf-cubugu { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Menü (4 araç). Dar ekranda menü başlığın altına iner ve yana kayar.
   ===================================================================== */
.ust { flex-wrap: wrap; row-gap: 10px; }
.menu { flex-wrap: nowrap; }
.menu a { white-space: nowrap; }
@media (max-width: 900px) {
  .menu {
    order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 0; padding-right: 16px;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { border-color: var(--cam-kenar); background: var(--cam); }
}

/* =====================================================================
   Metin sayfaları: kelime listeleri (sayfa normal akar)
   ===================================================================== */
.cerceve {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px; min-height: 72dvh;
  padding-block: 16px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.metin-govde { flex: 1; display: grid; gap: 16px; align-content: start; min-width: 0; }
.metin-govde h1 { margin: 6px 0 0; font: 800 clamp(26px, 3.4vw, 38px)/1.12 var(--yazi-baslik); letter-spacing: -0.02em; text-wrap: balance; }
.giris-metni { margin: 0; color: var(--soluk); font-size: 16px; max-width: 70ch; }
.giris-metni b { color: var(--yazi); }
.iz { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--silik); }
.iz a { color: var(--soluk); text-decoration: none; }
.iz a:hover { color: var(--nane-parlak); }
.iz > * + *::before { content: "›"; margin-right: 6px; color: var(--silik); }
.iz span { color: var(--yazi); }
.liste-bolum { display: grid; gap: 12px; }
.liste-bolum h2 { margin: 8px 0 0; font: 800 21px/1.2 var(--yazi-baslik); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; }
.liste-bolum h2 { flex-wrap: wrap; row-gap: 4px; }
.liste-bolum h2 span { font: 600 14px/1 var(--yazi-govde); color: var(--soluk); white-space: nowrap; }

.uzunluk-kartlari { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.uzunluk-kartlari a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--yazi); }
.uzunluk-kartlari a:hover { border-color: var(--nane); }
.uzunluk-kartlari b { font: 800 19px/1.2 var(--yazi-baslik); }
.uzunluk-kartlari span { font-size: 13.5px; color: var(--soluk); }

.harf-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.harf-izgara a { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; text-decoration: none; background: var(--cam); border: 1px solid var(--cam-kenar); }
.harf-izgara a:hover { border-color: var(--nane); }
.harf-izgara .tas { --tas-boy: 40px; width: 40px; flex: none; }
.harf-izgara small { font-size: 12.5px; color: var(--soluk); font-variant-numeric: tabular-nums; }

.uzunluk-secimi, .harf-atla { display: flex; flex-wrap: wrap; gap: 6px; }
.uzunluk-secimi a, .uzunluk-secimi span, .harf-atla a {
  padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--soluk); background: var(--cam); border: 1px solid var(--cam-kenar);
}
.uzunluk-secimi a:hover, .harf-atla a:hover { color: var(--yazi); border-color: var(--nane); }
.uzunluk-secimi span[aria-current] { color: var(--nane-uzeri); background: var(--nane); border-color: transparent; }
.harf-atla a { min-width: 38px; text-align: center; font-family: var(--yazi-baslik); }

/* Kelime çipleri (kelime listeleri) */
.cip-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cip-liste a, .cip-liste button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px;
  border-radius: 12px; border: 1px solid var(--cam-kenar); background: var(--cam); color: var(--yazi);
  font: 700 16px/1 var(--yazi-baslik); letter-spacing: .05em; cursor: pointer;
}
.cip-liste a:hover, .cip-liste button:hover { border-color: var(--nane); background: var(--cam-guclu); }
.cip-liste a, .cip-liste button { text-decoration: none; -webkit-touch-callout: none; }
.cip-liste a small, .cip-liste button small {
  min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: var(--nane-zemin); color: var(--nane-parlak); font: 800 12.5px/1 var(--yazi-govde); letter-spacing: 0;
}

@media (max-width: 680px) {
  .uzunluk-kartlari { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .uzunluk-kartlari a { padding: 10px 12px; border-radius: 14px; }
  .uzunluk-kartlari b { font-size: 16px; }
  .uzunluk-kartlari span { font-size: 12.5px; }
  .harf-izgara { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
  .harf-izgara .tas { --tas-boy: 34px; width: 34px; }
  .cip-liste a, .cip-liste button { height: 38px; font-size: 15px; padding: 0 7px 0 12px; }
}

/* Son aramalarım */
.gecmis-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gecmis-ust h2 { margin: 0 !important; }
.bilgi-ic .gecmis-ust + .ust-not-bilgi { margin: 6px 0 16px; font-size: 15px; color: var(--soluk); }
.gecmis-temizle {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cam-kenar);
  background: var(--cam); color: var(--soluk); font-size: 13px; font-weight: 700;
}
.gecmis-temizle:hover { color: var(--mercan-yazi); border-color: var(--mercan-yazi); }
.karsilama-alt.tek { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Uygulama kartı: uygulama simgesi
   ===================================================================== */
.uygulama-tanitim { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.uygulama-tanitim h2 { margin: 0 0 6px !important; }
.uygulama-tanitim .ust-not-bilgi { margin: 0 !important; font-size: 15px; color: var(--soluk); }
.uygulama-simge { width: 76px; height: 76px; flex: none; border-radius: 18px; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .12); }

/* =====================================================================
   İletişim
   ===================================================================== */
.iletisim { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px 40px; align-items: center; }
.iletisim .iletisim-yan h2 { margin: 0 0 8px; font: 800 24px/1.2 var(--yazi-baslik); letter-spacing: -0.02em; }
.iletisim-yan .ust-not-bilgi { margin: 0; font-size: 15.5px; color: var(--soluk); max-width: 40ch; }
.iletisim-logo { display: block; width: min(250px, 80%); height: auto; margin: 0 0 12px -10px; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .35)); }
.iletisim-form { display: grid; gap: 12px; min-width: 0; }
.iletisim-form .konu { flex: none; }
.iletisim-form textarea, .iletisim-form input[type="email"] {
  width: 100%; border-radius: var(--yaricap); border: 1px solid var(--cam-kenar);
  background: var(--cukur); color: var(--yazi); font: 500 16px/1.5 var(--yazi-govde);
}
.iletisim-form textarea { min-height: 128px; padding: 14px 16px; resize: vertical; }
.iletisim-form textarea::placeholder, .iletisim-form input::placeholder { color: var(--silik); }
.iletisim-form textarea:focus-visible, .iletisim-form input:focus-visible { outline: none; border-color: var(--nane); box-shadow: 0 0 0 4px rgb(62 224 193 / .18); }
.iletisim-alt { display: flex; gap: 10px; flex-wrap: wrap; }
.iletisim-alt input[type="email"] { flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 16px; }
.iletisim-alt button {
  height: 52px; padding: 0 30px; border: 0; border-radius: var(--yaricap);
  background: var(--nane); color: var(--nane-uzeri); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 20px -10px rgb(62 224 193 / .8);
}
.iletisim-alt button:disabled { opacity: .6; cursor: wait; }
.iletisim-form .oneri-durum { margin: 0; }
.iletisim-form .oneri-durum:empty { display: none; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.metin-govde .iletisim { margin-top: 6px; }
@media (max-width: 760px) {
  .iletisim { grid-template-columns: minmax(0, 1fr); }
  .iletisim-logo { width: 160px; margin-bottom: 8px; }
  .iletisim-alt button { flex: 1 1 100%; }
}

/* =====================================================================
   Alt bilgi (marka bölümü)
   ===================================================================== */
.alt-bilgi {
  margin-top: 48px;
  background: linear-gradient(180deg, rgb(3 10 28 / .30), rgb(3 10 28 / .55));
  border-top: 1px solid var(--cam-cizgi);
}
.alt-ic, .alt-son {
  max-width: 1440px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.alt-ic {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 30px 28px;
  padding-top: 40px; padding-bottom: 34px;
}
.alt-marka .marka-logo { height: 66px; margin: -8px 0 -8px 0; }
.alt-marka .marka-ad { font-size: 32px; }
.alt-marka p { margin: 16px 0 0; color: var(--soluk); font-size: 15px; max-width: 38ch; }
.alt-sutun { display: grid; gap: 10px; align-content: start; }
.alt-sutun h3 { margin: 4px 0 4px; font: 800 13px/1.2 var(--yazi-govde); letter-spacing: .08em; text-transform: uppercase; color: var(--yazi); }
.alt-sutun a, .alt-sutun span { color: var(--soluk); text-decoration: none; font-size: 15px; width: fit-content; }
.alt-sutun a:hover { color: var(--nane-parlak); }
.alt-sutun small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgb(255 181 71 / .14); color: var(--logo-turuncu); font-size: 11.5px; font-weight: 700; }
.alt-son {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding-top: 18px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cam-cizgi); color: var(--silik); font-size: 13px;
}
.alt-son p { margin: 0; }
.alt-son .telif { color: var(--soluk); font-weight: 600; }
@media (max-width: 900px) {
  .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-marka { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .alt-ic { padding-top: 30px; gap: 26px 18px; }
  .alt-marka .marka-logo { height: 54px; }
  .alt-marka .marka-ad { font-size: 27px; }
  .alt-sutun:last-child { grid-column: 1 / -1; }
}

/* =====================================================================
   Bulunamadı sayfası ve düğmeler
   ===================================================================== */
.bulunamadi { display: grid; justify-items: start; gap: 10px; padding: 20px 0; }
.bulunamadi img { width: min(280px, 70vw); height: auto; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .35)); }
.bulunamadi-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.dugme {
  display: inline-grid; place-items: center; height: 48px; padding: 0 22px; border-radius: var(--yaricap);
  background: var(--nane); color: var(--nane-uzeri); font-weight: 800; text-decoration: none;
}
.dugme.ikincil { background: var(--cam); color: var(--yazi); border: 1px solid var(--cam-kenar); }

/* =====================================================================
   Kelime sayfası
   ===================================================================== */
.kelime-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding: 24px clamp(18px, 3vw, 30px); border-radius: 22px; }
.kelime-taslar { display: flex; flex-wrap: wrap; gap: 6px; }
.kelime-taslar .tas { --tas-boy: 52px; width: 52px; flex: none; font-size: 26px; }
.kelime-bilgi { display: grid; gap: 10px; min-width: 0; }
.kelime-bilgi h1 { margin: 0 !important; }
.kelime-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rozet { padding: 6px 12px; border-radius: 999px; background: var(--cam-guclu); border: 1px solid var(--cam-kenar); font-size: 14px; font-weight: 700; color: var(--yazi); }
.rozet.nane { background: var(--nane-zemin); color: var(--nane-parlak); border-color: transparent; }
.kelime-kart { display: grid; gap: 12px; padding: 22px clamp(18px, 3vw, 30px); border-radius: 22px; }
.kelime-kart h2 { margin: 0; font: 800 21px/1.2 var(--yazi-baslik); letter-spacing: -0.01em; }
.kelime-kart .anlam-liste { font-size: 17px; }
.kelime-eylem { margin: 0; }
.alt-baslik { margin: 6px 0 -2px; font: 700 14px/1.2 var(--yazi-govde); color: var(--soluk); }
.liste-bolum .giris-metni { margin-top: 2px; }
@media (max-width: 680px) {
  .kelime-taslar .tas { --tas-boy: 42px; width: 42px; font-size: 21px; }
}
/* Anlam penceresindeki "kelimenin sayfası" bağlantısı */
.anlam-git {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px;
  padding: 10px 16px; border-radius: 12px; background: var(--nane-zemin); color: var(--nane-parlak);
  font-weight: 800; font-size: 14.5px; text-decoration: none;
}
.anlam-git:hover { background: var(--nane); color: var(--nane-uzeri); }
.anlam-git svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   Ana sayfa tanıtım bölümü ve sık sorulan sorular
   ===================================================================== */
.tanitim h1 { margin: 0 0 12px; font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--yazi-baslik); letter-spacing: -0.02em; text-wrap: balance; }
.tanitim-giris { margin: 0; max-width: 78ch; color: var(--soluk); font-size: 16.5px; }
.ozellikler { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ozellikler li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 16px; background: rgb(0 0 0 / .18); border: 1px solid var(--cam-cizgi); }
.ozellikler b { font: 800 17px/1.2 var(--yazi-baslik); color: var(--nane-parlak); }
.ozellikler span { font-size: 14.5px; color: var(--soluk); }
.sss { display: grid; gap: 8px; }
.sss details { border-radius: 14px; background: rgb(0 0 0 / .16); border: 1px solid var(--cam-cizgi); }
.sss summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--nane); font: 800 20px/1 var(--yazi-baslik); }
.sss details[open] summary::after { content: "–"; }
.sss p { margin: 0; padding: 0 18px 16px; color: var(--soluk); font-size: 15px; max-width: 80ch; }
@media (max-width: 980px) { .ozellikler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ozellikler { grid-template-columns: minmax(0, 1fr); } }

/* Sade ana sayfa: bilgi kartları alt alta; uygulama kartı geniş ekranda yatay */
@media (min-width: 900px) {
  .bilgi .uygulamalar { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; }
  .bilgi .uygulamalar .uygulama-tanitim { margin-bottom: 0; }
  .bilgi .uygulamalar .magaza-satiri { flex: 0 1 560px; justify-content: flex-end; }
}
.konu-ipucu { margin: -2px 0 0; color: var(--soluk); font-size: 14.5px; min-height: 2.9em; }
.tanitim-son { margin: 18px 0 0; color: var(--soluk); font-size: 15px; }
/* Menüde uzun ad / kısa ad (telefon) */
.menu-kisa { display: none; }
@media (max-width: 680px) {
  .menu-uzun { display: none; }
  .menu-kisa { display: inline; }
}
.metin-govde .sss { max-width: 900px; }

/* Günün kelimesi ve harf puanları geniş ekranda yan yana, aynı yükseklikte */
@media (min-width: 900px) {
  .bilgi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bilgi > * { grid-column: 1 / -1; }
  .bilgi > #gunun-bolum, .bilgi > .puanlar { grid-column: auto; }
  .bilgi:has(> #gunun-bolum[hidden]) > .puanlar { grid-column: 1 / -1; }
  .bilgi > .puanlar .puan-tablosu { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .bilgi > #gunun-bolum:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
  .bilgi > #gunun-bolum .gunun-dugme { margin-top: auto; align-self: flex-start; }
}
.karsilama-aramalar { padding: 18px 20px 20px; }
/* Telefonda günün kelimesi tek satırda kalsın (taşlar gerektiği kadar küçülür) */
@media (max-width: 520px) {
  .gunun-taslar { flex-wrap: nowrap; gap: 5px; }
  .gunun-taslar .tas { flex: 0 1 40px; width: auto; }
}