/* KelimePilot / Bulmaca Çözücü — yalnızca bu araç sayfası. */
.bc-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 46px); border-radius: 25px; border: 1px solid rgb(77 184 255 / .24); background: radial-gradient(70% 100% at 94% 0%, rgb(77 184 255 / .2), transparent), linear-gradient(125deg, rgb(18 49 79 / .9), rgb(5 29 51 / .87)); overflow: hidden; }
.bc-hero-yazi { display: grid; gap: 16px; }
.bc-ust-etiket { color: var(--nane-parlak); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.bc-hero h1 { margin: 0; max-width: 700px; font-size: clamp(30px, 4.7vw, 59px); line-height: 1.06; letter-spacing: -.035em; }
.bc-hero h1 em { color: var(--nane-parlak); font-style: normal; }
.bc-hero p { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--soluk); margin: 0; }
.bc-hero p b { color: white; }
.bc-hero-nitelik { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-hero-nitelik span { border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .055); color: var(--soluk); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; }
.bc-hero-ornek { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(5px, .7vw, 10px); transform: rotate(-4deg); }
.bc-hero-ornek > span { width: clamp(38px, 4.4vw, 65px); height: clamp(46px, 5.5vw, 75px); display: grid; place-items: center; border-radius: 12px; background: #fff8e8; color: #172b41; box-shadow: 0 5px 0 #d7c9a6, 0 14px 27px rgb(0 0 0 / .16); font: 800 clamp(24px, 3vw, 38px)/1 var(--yazi-baslik); }
.bc-joker-tasi { background: linear-gradient(155deg, var(--mercan-1), var(--mercan-2)); color: #fff; border: 1px solid rgb(255 255 255 / .18); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 10px 20px rgb(255 95 120 / .22); }
.bc-hero-ornek > .bc-joker-tasi { background: linear-gradient(155deg, var(--mercan-1), var(--mercan-2)); color: #fff; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .2), 0 14px 27px rgb(255 95 120 / .23); }
.bc-hero-ornek small { color: var(--soluk); width: 100%; text-align: center; font-size: 12px; margin-top: 13px; transform: rotate(4deg); }
.bc-arama, .bc-sonuc-panel, .bc-sss { padding: clamp(20px, 3vw, 32px); border-radius: 24px; }
.bc-arama { display: grid; gap: 20px; }
.bc-baslik, .bc-sonuc-ust { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.bc-baslik > div, .bc-sonuc-ust > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bc-baslik h2, .bc-sonuc-ust h2 { margin: 0; font: 800 clamp(19px, 2vw, 24px)/1.25 var(--yazi-baslik); }
.bc-adim { display: inline-grid; place-items: center; width: 33px; height: 33px; border-radius: 11px; background: var(--nane); color: var(--nane-uzeri); font-weight: 900; font-size: 12px; }
.bc-sinir, .bc-siralama { color: var(--silik); font-size: 12px; text-align: right; }
.bc-form { display: grid; gap: 10px; }
.bc-label { font-size: 14px; color: var(--soluk); font-weight: 600; }
.bc-girdi-satiri { display: flex; gap: 10px; }
.bc-girdi-grup { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 10px; }
.bc-joker-dugme { flex: 0 0 64px; display: grid; place-items: center; width: 64px; min-height: 64px; padding: 0; border-radius: 15px; font: 900 33px/1 var(--yazi-baslik); cursor: pointer; touch-action: manipulation; transition: transform .12s ease, filter .12s ease; }
.bc-joker-dugme:hover { filter: brightness(1.1); transform: translateY(-1px); }
.bc-joker-dugme:active { transform: scale(.95); }
.bc-joker-dugme:focus-visible { outline: 3px solid var(--nane); outline-offset: 3px; }
.bc-girdi-satiri input { min-width: 0; flex: 1; width: 100%; height: 64px; border-radius: 15px; padding: 0 19px; background: rgb(4 20 44 / .64); color: #fff; border: 1px solid rgb(77 184 255 / .42); outline: none; font: 800 clamp(18px, 2.1vw, 27px)/1 var(--yazi-baslik); letter-spacing: .08em; text-transform: uppercase; }
.bc-girdi-satiri input::placeholder { color: rgb(177 203 222 / .62); font-weight: 500; letter-spacing: 0; font-size: 18px; }
.bc-girdi-satiri input:focus-visible { border-color: var(--nane); box-shadow: 0 0 0 4px rgb(62 224 193 / .16); }
.bc-ara-dugme { padding: 0 22px; border: 0; border-radius: 14px; min-height: 56px; background: var(--nane); color: var(--nane-uzeri); font: 800 16px/1.2 var(--yazi-govde); cursor: pointer; }
.bc-ara-dugme:hover { filter: brightness(1.1); }
.bc-ara-dugme:disabled { opacity: .6; cursor: wait; }
.bc-ara-dugme span { margin-left: 12px; font-size: 20px; }
.bc-kucuk-aciklama { font-size: 13px; color: var(--silik); margin: 0; }
.bc-kucuk-aciklama b { color: var(--gok); }
.bc-hata { background: rgb(255 112 112 / .1); color: #ffb6b6; padding: 12px 15px; margin: 0; border: 1px solid rgb(255 112 112 / .3); border-radius: 12px; }
.bc-ornekler { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.bc-ornekler > span { color: var(--soluk); font-size: 13px; margin-right: 4px; }
.bc-ornekler button { color: var(--gok); border: 1px solid rgb(77 184 255 / .35); background: rgb(77 184 255 / .08); padding: 8px 13px; border-radius: 10px; font: 800 14px var(--yazi-govde); letter-spacing: .07em; cursor: pointer; }
.bc-ornekler button:hover { background: rgb(77 184 255 / .2); }
.bc-gorsel-satir { display: grid; gap: 10px; padding-top: 17px; border-top: 1px solid var(--cam-cizgi); }
.bc-gorsel-satir > span { font-size: 13px; color: var(--soluk); }
.bc-onizleme { display: flex; gap: 7px; flex-wrap: wrap; }
.bc-kare { display: grid; place-items: center; width: 43px; height: 47px; border-radius: 10px; background: #fff8e8; color: #243147; font: 800 23px/1 var(--yazi-baslik); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14); }
.bc-kare.bc-joker-tasi { background: linear-gradient(155deg, var(--mercan-1), var(--mercan-2)); color: #fff; border: 1px solid rgb(255 255 255 / .18); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 8px 14px rgb(255 95 120 / .2); }
.bc-sonuc-panel { display: grid; gap: 20px; }
.bc-sonuc-ust > div { row-gap: 4px; }
.bc-sonuc-ust #bc-ozet { flex-basis: 100%; margin: 0 0 0 44px; font-size: 14px; color: var(--soluk); }
.bc-kelimeler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.bc-kelime { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 15px 16px; min-width: 0; border-radius: 12px; text-decoration: none; color: var(--yazi); background: rgb(3 19 39 / .35); border: 1px solid var(--cam-kenar); }
.bc-kelime:hover, .bc-kelime:focus-visible { border-color: var(--nane); background: rgb(62 224 193 / .07); }
.bc-kelime strong { font: 800 17px/1.2 var(--yazi-baslik); overflow-wrap: anywhere; }
.bc-kelime span { color: var(--nane-parlak); white-space: nowrap; font-size: 12px; font-weight: 700; }
.bc-bos-sonuc { grid-column: 1 / -1; color: var(--soluk); margin: 8px 0; }
.bc-sayfalama { display: flex; align-items: center; justify-content: center; gap: 15px; padding-top: 12px; border-top: 1px solid var(--cam-cizgi); }
.bc-sayfalama button { background: var(--cam-guclu); border: 1px solid var(--cam-kenar); color: var(--yazi); border-radius: 10px; padding: 10px 15px; font: 700 14px var(--yazi-govde); cursor: pointer; }
.bc-sayfalama button:disabled { opacity: .35; cursor: default; }
.bc-sayfalama span { font-size: 14px; color: var(--soluk); }
.bc-bilgi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bc-bilgi-kart { border-radius: 20px; padding: 22px; }
.bc-bilgi-simge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgb(77 184 255 / .11); color: var(--gok); font: 800 25px/1 var(--yazi-baslik); }
.bc-bilgi-kart h2 { font: 800 19px/1.2 var(--yazi-baslik); margin: 17px 0 8px; }
.bc-bilgi-kart p { color: var(--soluk); font-size: 14px; line-height: 1.6; margin: 0; }
.bc-bilgi-kart a { color: var(--nane-parlak); }
.araclar-alt-gecis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.araclar-alt-gecis a { color: var(--nane-parlak); font-size: 14px; font-weight: 800; text-decoration: none; padding: 12px 16px; background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: 999px; }
.araclar-alt-gecis a:hover { border-color: var(--nane); background: var(--cam-guclu); }
.bc-sss { display: grid; gap: 7px; }
.bc-sss h2 { margin: 0 0 9px; font: 800 22px/1.2 var(--yazi-baslik); }
.bc-sss details { border-top: 1px solid var(--cam-kenar); padding: 15px 0 9px; }
.bc-sss summary { cursor: pointer; font-weight: 700; }
.bc-sss p { margin: 11px 0 0; color: var(--soluk); font-size: 14px; line-height: 1.6; max-width: 80ch; }
[hidden] { display: none !important; }
@media (max-width: 1020px) {
  .bc-kelimeler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .bc-hero { grid-template-columns: 1fr; }
  .bc-hero-ornek { transform: none; justify-content: flex-start; }
  .bc-hero-ornek small { text-align: left; transform: none; }
  .bc-bilgi { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .bc-hero { padding: 25px 19px; gap: 25px; }
  .bc-hero h1 { font-size: clamp(29px, 9vw, 39px); }
  .bc-hero-ornek > span { width: 46px; height: 52px; }
  .bc-girdi-satiri { flex-direction: column; }
  .bc-girdi-grup { width: 100%; }
  .bc-girdi-satiri input { flex: 1 1 auto; height: 58px; }
  .bc-joker-dugme { flex-basis: 58px; width: 58px; min-height: 58px; font-size: 30px; }
  .bc-ara-dugme { min-height: 54px; width: 100%; }
  .bc-kelimeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-sonuc-ust { flex-wrap: wrap; }
  .bc-sonuc-ust #bc-ozet { margin-left: 0; }
  .bc-sonuc-ust .bc-siralama { text-align: left; }
}
@media (max-width: 380px) {
  .bc-kelimeler { grid-template-columns: 1fr; }
  .bc-hero-ornek > span { width: 40px; height: 46px; }
}