/* public/css/kokler.css */
@font-face{
  font-family:"MyArabic";
  src:url("/fonts/KuranKerimFontHamdullah.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.kokler-page{
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

.kok-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}

.kok-letter{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:14px 0;
  font-family:"MyArabic", serif;
  font-size:26px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.kok-roots-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.kok-root{
  text-decoration:none;
  color:#111827;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px 10px;
  text-align:center;
  font-family:"MyArabic", serif;
  font-size:22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.kok-root:hover{
  color:#dc2626;
}

/* HARF EKRANI: kutular sağdan sola dizilsin */
.kok-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  flex-direction: row-reverse; /* <<< KUTULARIN SIRASI RTL */
}

.kok-letter{
  width: 64px;
}

/* MODAL: kök kutuları sağdan sola dizilsin */
.kok-roots-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  flex-direction: row-reverse; /* <<< KUTULARIN SIRASI RTL */
}

/* Kutular hover olunca kırmızı */
.kok-letter,
.kok-root{
  transition: color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Yazı kırmızı */
.kok-letter:hover,
.kok-root:hover{
  color: #dc2626;            /* kırmızı */
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 8px 18px rgba(220,38,38,.08);
}
.kok-root a,
.kok-letter a{
  color: inherit;
  text-decoration: none;
}