/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;600;700;900&family=Milonga&display=swap');

/* ── Scope: .runler-wrap – WordPress temasıyla çakışmayı önler ── */
.runler-wrap {
  --speed:    300ms;
  --bg-top:   #e0f1f4;
  --bg-eksen: #e4f2ee;
  --bg-pgrid: #e8f1f6;;
  --primary:  #9F7AEA;
  --glow:     #C4B5FD;
  --dark:     #0F0F1A;
  --card-border: #8a8a8a;

  background: radial-gradient(circle at 30% 20%, #fff, #fff);
  color: #404040;
  font-family: 'Sen', serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.runler-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.runler-wrap .container         { max-width: 1280px; margin: 0 auto; padding: 2rem; }
.runler-wrap .containerHeader   { font-family: "Milonga", serif; font-weight: 400; }

.runler-wrap h1 {
  text-align: center;
  font-size: 3.5rem;
  -webkit-background-clip: text;
  color: #404040;
  margin: 3rem 0 4rem;
  font-weight: 900;
}
.runler-wrap h3 { text-align: center; }

.runler-wrap .input-section {
  max-width: 560px;
  margin: 0 auto 5rem;
  padding: 2.5rem;
  background: rgb(250,250,250);
  border-radius: 24px;
  border: 1px solid var(--primary);
  box-shadow: 0 0px 0px rgba(159, 122, 234, 0.25);
  backdrop-filter: blur(12px);
}

.runler-wrap input,
.runler-wrap select,
.runler-wrap button {
  width: 100%;
  padding: 1.1rem;
  margin: 1rem 0;
  border-radius: 12px;
  font-size: 1.1rem;
}
.runler-wrap input,
.runler-wrap select {
  background: #edf2f6;;
  border: 1px solid #5a4a8a;
  color: #404040;
}
.runler-wrap select option[value=""] { color: #888; }

.runler-wrap button {
  background: linear-gradient(45deg, #9F7AEA, #C4B5FD);
  border: none;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
  margin-top: 1.5rem;
}
.runler-wrap button:hover        { transform: scale(1.05); box-shadow: 0 0 0px var(--glow); }
.runler-wrap button:disabled     { opacity: .6; cursor: not-allowed; transform: none; }

.runler-wrap .result             { display: none; margin-top: 3rem; }

.runler-wrap .rune-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all var(--speed) ease-in-out;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.8rem;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.45);
}

.runler-wrap #yasam-card,
.runler-wrap #isim-card,
.runler-wrap #golge-card,
.runler-wrap #baskin-card { background: var(--bg-top); }

.runler-wrap #baskin-card {
  border: 2px solid #C4B5FD;
  box-shadow: 0 0 0px rgba(196, 181, 253, 0.4);
}

.runler-wrap #ruh,
.runler-wrap #kader,
.runler-wrap #zihin,
.runler-wrap #madde    { background: var(--bg-eksen); }

.runler-wrap #p-grid .rune-card { background: var(--bg-pgrid); }
.runler-wrap .rune-card.visible  { opacity: 1; transform: translateY(0); }
.runler-wrap .rune-card:hover    { transform: scale(1.03); box-shadow: 0 0 0px var(--glow); }

.runler-wrap .rune-symbol {
  font-size: 5.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  font-family: serif;
  text-shadow: 0 0 0px var(--glow);
}
.runler-wrap #baskin-card .rune-symbol { font-size: 7.2rem; margin-bottom: 1.2rem; }
.runler-wrap .rune-desc { font-size: .95rem; color: #404040; margin-top: 1rem; }

.runler-wrap #diamond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 2.5rem;
  margin: 4rem 0;
  justify-items: center;
  align-items: center;
}
.runler-wrap #diamond-grid > div:nth-child(1) { grid-area: 1/2; }
.runler-wrap #diamond-grid > div:nth-child(2) { grid-area: 2/1; }
.runler-wrap #diamond-grid > div:nth-child(3) { grid-area: 2/3; }
.runler-wrap #diamond-grid > div:nth-child(4) { grid-area: 3/2; }

.runler-wrap .section-line {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  width: 0;
  margin: 4rem auto;
  border-radius: 2px;
  transition: width 1s ease-in-out;
}

.runler-wrap #p-grid {
  display: grid;
  gap: 1.5rem;
  margin: 3rem auto;
  max-width: 1000px;
  justify-content: center;
  grid-template-columns: minmax(280px, 380px) minmax(300px, 380px) minmax(280px, 380px);
  grid-template-areas:
    ".  p1  ."
    "p2 .   p3"
    "p4 p5  p6"
    ".  p7  ."
    ".  p8  ."
    "p9 p10 p11"
    ".  p12 ."
    ".  p13 .";
}
.runler-wrap #p-grid > div { background: var(--bg-pgrid); border-radius: 20px; }
.runler-wrap #p1{grid-area:p1}.runler-wrap #p2{grid-area:p2}.runler-wrap #p3{grid-area:p3}
.runler-wrap #p4{grid-area:p4}.runler-wrap #p5{grid-area:p5}.runler-wrap #p6{grid-area:p6}
.runler-wrap #p7{grid-area:p7}.runler-wrap #p8{grid-area:p8}.runler-wrap #p9{grid-area:p9}
.runler-wrap #p10{grid-area:p10}.runler-wrap #p11{grid-area:p11}.runler-wrap #p12{grid-area:p12}
.runler-wrap #p13{grid-area:p13;justify-self:center}

.runler-wrap #runler-hata-mesaj {
  display: none;
  color: #ff6b6b;
  background: rgba(255,50,50,.15);
  border: 1px solid rgba(255,50,50,.4);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .runler-wrap h1             { font-size: 2.6rem; }
  .runler-wrap .rune-symbol   { font-size: 4rem; }
  .runler-wrap #baskin-card .rune-symbol { font-size: 5.8rem; }

  .runler-wrap #diamond-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 1.8rem;
    margin: 3rem 0;
  }
  .runler-wrap #diamond-grid > div:nth-child(1) { grid-area: 1/1; }
  .runler-wrap #diamond-grid > div:nth-child(4) { grid-area: 2/1; }
  .runler-wrap #diamond-grid > div:nth-child(2) { grid-area: 3/1; }
  .runler-wrap #diamond-grid > div:nth-child(3) { grid-area: 4/1; }
  .runler-wrap .rune-card     { max-width: 360px; margin: 0 auto; padding: 1.4rem 1.2rem; }

  .runler-wrap #p-grid {
    grid-template-columns: 320px;
    grid-template-areas: none;
    gap: 1.3rem;
    justify-content: center;
    padding: 0 12px;
    margin: 2.5rem auto;
  }
  .runler-wrap .container {padding:0px;}
  .runler-wrap #p-grid .rune-card { width: 320px; max-width: 320px; margin: 0 auto; }
  .runler-wrap #p1,.runler-wrap #p2,.runler-wrap #p3,.runler-wrap #p4,
  .runler-wrap #p5,.runler-wrap #p6,.runler-wrap #p7,.runler-wrap #p8,
  .runler-wrap #p9,.runler-wrap #p10,.runler-wrap #p11,.runler-wrap #p12,
  .runler-wrap #p13 { grid-area: auto !important; }
}