/* ── evcil dost: ikinizin tomurcuğu (gece perdesinin ikinci sahnesi) ──
   Kaynak: tasarım dokümanı 14a (yuva), 14b (dükkan), 14c (kor kazan).
   Gökyüzü'nün bittiği tondan devralır, sohbetin açık zeminine akar. */

.dost {
  position: relative;
  margin-top: -1px; /* gökyüzü ile birleşim çizgisi görünmesin */
  background: linear-gradient(178deg, #4A7291 0%, #31506E 46%, #22405E 100%);
  color: var(--ekran);
  padding: clamp(44px, 6vh, 72px) clamp(20px, 4vw, 48px) clamp(120px, 15vh, 190px);
  overflow: hidden;
}
.dost-glow {
  position: absolute; top: 300px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,181,62,.24), rgba(95,181,62,0) 70%);
  pointer-events: none;
}
.dost-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: linear-gradient(180deg, rgba(237,244,246,0), var(--ekran));
  pointer-events: none;
}

.dost-demo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px);
  max-width: 1060px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  align-items: start;
}

/* ── sol: yuva ── */
.dost-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.dost-owner {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--gok-etiket);
}
.tohum-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(197,226,230,.14);
  border: 1px solid rgba(197,226,230,.45);
  border-radius: 999px; padding: 6px 13px;
  font-size: 13px; font-weight: 700; color: var(--buz);
}
.tohum-chip i {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--tohum-krem); color: var(--arduvaz);
  font-style: normal; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.tohum-chip.bump { animation: tohumBump .5s var(--ease-out); }
@keyframes tohumBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.dost-pet-wrap {
  position: relative;
  height: 290px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-top: 10px;
}
.dost-ground {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 190px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(7px);
}
.pet-figure { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; }
.pf { display: none; }
.pf.on { display: block; animation: petPop .55s var(--ease-out); }
@keyframes petPop {
  0% { transform: scale(.6) translateY(14px); opacity: 0; }
  60% { transform: scale(1.08) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.pf.nom { animation: petNom .5s var(--ease-out); }
@keyframes petNom {
  0% { transform: scale(1); }
  35% { transform: scale(1.06, .94); }
  70% { transform: scale(.97, 1.04); }
  100% { transform: scale(1); }
}
/* seviye başına gerçekçi boy: tohum minicik, tomurcuk kocaman */
.pf[data-pf="l1"] { height: 64px; }
.pf[data-pf="l2"] { height: 118px; }
.pf[data-pf="l3"] { height: 158px; }
.pf[data-pf="l4"] { height: 178px; }
.pf[data-pf="l5"] { height: 212px; }
.pf[data-pf="l6"] { height: 248px; }
.pf[data-pf^="w-"] { height: 244px; }
.pf { width: auto; }

.dost-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.dost-fx .fx {
  position: absolute;
  font-size: 22px;
  animation: fxFloat 1.1s ease-out forwards;
}
@keyframes fxFloat {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-70px) scale(1.15); opacity: 0; }
}
.dost-fx .fx--drop { animation: fxDrop .6s cubic-bezier(.3,.6,.6,1) forwards; }
@keyframes fxDrop {
  0% { transform: translateY(-90px) scale(.8); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0; }
}

.dost-name {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px;
}
.dost-name > span:first-child {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ekran);
}
.dost-level {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  background: rgba(255,255,255,.08);
  border-radius: 999px; padding: 5px 11px;
  color: var(--gece-metin-mat);
}
.dost-status {
  text-align: center;
  font-size: 13.5px; color: var(--gece-metin); line-height: 1.55;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(197,226,230,.08);
  border: 1px solid rgba(197,226,230,.3);
  border-radius: 18px;
}
.dost-next {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.dost-next > span {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--gok-etiket);
}
.dost-next-track {
  width: min(220px, 50%);
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.dost-next-track i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--buz);
  transition: width .6s var(--ease-out);
}

.dost-bars {
  background: var(--ink);
  border-radius: 22px;
  padding: 16px 18px;
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.dost-bar-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--ekran);
}
.dost-bar-top b {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; color: var(--buz);
}
.dost-track {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-top: 7px;
}
.dost-track i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--buz);
  transition: width .6s var(--ease-out);
}
.dost-track .dost-track--nese,
i.dost-track--nese { background: linear-gradient(90deg, #6387A6, #A5C8DC); }
i.dost-track--canlilik { background: var(--ekran); }

.dost-actions { display: flex; gap: 10px; margin-top: 14px; }
.dost-btn {
  flex: 1;
  height: 54px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08);
  color: var(--ekran);
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .3s, transform .3s var(--ease-out);
}
.dost-btn:hover { background: rgba(255,255,255,.14); }
.dost-btn:active { transform: scale(.97); }
.dost-btn--besle {
  flex: 1.3;
  background: var(--buz); color: var(--arduvaz); font-weight: 700;
  box-shadow: 0 12px 28px rgba(99,135,166,.25);
}
.dost-btn--besle:hover { background: #D4EBEE; }
.dost-cost {
  background: rgba(53,86,111,.16);
  border-radius: 999px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 700;
}

.dost-log { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dost-log-item {
  background: var(--ink);
  border-radius: 16px;
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ekran);
  animation: logIn .4s var(--ease-out);
}
@keyframes logIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.dost-log-item .who {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  background: var(--buz); color: var(--arduvaz);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.dost-log-item .what { flex: 1; }
.dost-log-item .what i { font-style: normal; color: var(--gece-kunye); }
.dost-log-item .when {
  font-family: var(--mono);
  font-size: 10.5px; color: var(--gece-kunye); letter-spacing: .08em;
}

/* ── sağ: kor kazan + dükkan ── */
.dost-side-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 4px;
}
.dost-note + .dost-side-head { margin-top: 22px; }
.dost-side-head > span:first-child {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--gok-etiket);
}
.dost-side-sub {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: var(--gece-kunye);
  text-align: right;
}
.quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.quest {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ekran);
  text-align: left;
  transition: background .3s, transform .3s var(--ease-out), opacity .3s;
}
.quest:hover:not(.done) { background: var(--arduvaz); transform: translateY(-1px); }
.quest-name { font-size: 14px; font-weight: 600; line-height: 1.4; }
.quest-name i {
  display: block; font-style: normal;
  font-size: 12px; font-weight: 400; color: var(--gece-metin-mat);
}
.quest-tohum {
  flex: none;
  background: rgba(242,228,187,.14);
  border: 1px solid rgba(242,228,187,.4);
  color: var(--tohum-krem);
  border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 700;
  transition: background .3s;
}
.quest.done { opacity: .55; cursor: default; }
.quest.done .quest-tohum {
  background: rgba(197,226,230,.12);
  border-color: rgba(197,226,230,.3);
  color: var(--buz);
}

.dost-note {
  font-size: 12.5px; color: var(--gece-metin-mat); line-height: 1.55;
  margin-top: 12px;
}

.shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.shop-item {
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 12px 10px 12px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ekran);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: background .3s, transform .3s var(--ease-out), border-color .3s, opacity .3s;
}
.shop-item svg { height: 44px; width: auto; max-width: 100%; }
.shop-item:hover:not(:disabled) { background: var(--arduvaz); transform: translateY(-2px); }
.shop-item:disabled { opacity: .45; cursor: default; }
.shop-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; }
.shop-price {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: var(--tohum-krem);
}
.shop-item.owned .shop-price { color: var(--buz); }
.shop-item.worn { border-color: rgba(197,226,230,.55); background: var(--arduvaz); }

@media (max-width: 860px) {
  .dost-demo { grid-template-columns: 1fr; }
  .dost-pet-wrap { height: 260px; }
  .pf[data-pf="l6"], .pf[data-pf^="w-"] { height: 220px; }
}