/* ============================================================
   Mira Halı Yıkama — style.css
   ------------------------------------------------------------
   1. Değişkenler   2. Reset   3. Yardımcılar   4. Butonlar
   5. Header        6. Hero    7. Şerit         8. Bölümler
   9. Hizmetler    10. Süreç  11. Hakkımızda   12. S.S.S.
  13. CTA          14. İletişim               16. Footer
  17. Sabit butonlar          18. Responsive
   ============================================================ */

/* ---------- 1. Değişkenler ---------- */
:root {
  /* Logo renkleri */
  --navy:        #133354;   /* logo lacivert */
  --navy-dark:   #0d2540;
  --navy-soft:   #1c4c7a;
  --teal:        #3f77a4;   /* logo mavi (vurgu) */
  --teal-dark:   #2d6086;   /* koyu zeminsiz metin için */
  --blue-light:  #8bbee4;   /* koyu zemin üzerinde vurgu */
  --amber:       #f4a259;

  --ink:         #10202f;
  --body:        #4a5b6b;
  --muted:       #7b8b99;
  --line:        #e3e9ef;
  --bg:          #ffffff;
  --bg-alt:      #f5f8fb;
  --bg-tint:     #eaf2f9;

  --radius:      14px;
  --radius-lg:   22px;
  --shadow-sm:   0 1px 2px rgba(19,51,84,.06), 0 2px 8px rgba(19,51,84,.05);
  --shadow-md:   0 4px 12px rgba(19,51,84,.07), 0 12px 32px rgba(19,51,84,.08);
  --shadow-lg:   0 8px 24px rgba(19,51,84,.10), 0 24px 60px rgba(19,51,84,.12);

  --max:         1180px;
  --gutter:      24px;
  --font:        'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --t:           .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
}

p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--teal-dark); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- 3. Yardımcılar ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-dark); margin-bottom: 12px;
}

.grad {
  background: linear-gradient(100deg, var(--navy-soft), #4f8fc0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- 4. Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  font-size: 15px; font-weight: 700; line-height: 1;
  border: 2px solid transparent; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(19,51,84,.25);
}
.btn--primary:hover { background: var(--navy-soft); color: #fff; box-shadow: 0 10px 24px rgba(19,51,84,.3); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); background: var(--bg-tint); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--ink); padding: 10px 12px; }
.btn--ghost:hover { color: var(--teal-dark); }

.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #e8f1f9; color: var(--navy); }

.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--block { width: 100%; }

/* ---------- 5. Üst bar + Header ---------- */
.topbar {
  background: var(--navy-dark); color: rgba(255,255,255,.78);
  font-size: 13px; line-height: 1;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 40px; flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 15px; height: 15px; color: var(--blue-light); }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; gap: 24px; min-height: 74px; }

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 44px; width: auto; display: block; }
.logo--light img { height: 54px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__list a {
  display: block; padding: 9px 13px; border-radius: 8px;
  font-size: 15px; font-weight: 600; color: var(--body);
  transition: background var(--t), color var(--t);
}
.nav__list a:hover, .nav__list a.is-active { color: var(--navy); background: var(--bg-tint); }

.header__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.btn--phone span { font-size: 15px; font-weight: 700; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t), opacity var(--t);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero { position: relative; padding: 92px 0 100px; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(63,119,164,.20), transparent 62%),
    radial-gradient(620px 420px at 4% 8%, rgba(19,51,84,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-tint) 0%, #fff 68%);
}
.hero__inner { max-width: 780px; margin: 0 auto; text-align: center; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 10px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.pill svg { width: 17px; height: 17px; color: var(--teal-dark); stroke-width: 2.6; flex: none; }

.hero__title { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.035em; margin-bottom: 20px; }
.hero__desc { font-size: 17.5px; max-width: 58ch; margin: 0 auto 32px; }

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ico-wa { color: #25d366; }

/* Form alanları */
.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg-alt); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #a9b6c2; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(63,119,164,.18);
}
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  border-color: #e0554f; background: #fdf3f2;
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; font-size: 14px; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--navy); }

.form-status { margin: 14px 0 0; font-size: 14.5px; font-weight: 600; text-align: center; min-height: 22px; }
.form-status.is-ok { color: var(--teal-dark); }
.form-status.is-err { color: #d64541; }

/* ---------- 7. Güven şeridi ---------- */
.strip { border-block: 1px solid var(--line); background: #fff; }
.strip__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 24px;
}
.strip__item { display: flex; align-items: center; gap: 14px; }
.strip__item > svg {
  width: 38px; height: 38px; flex: none; padding: 7px;
  color: var(--navy); background: var(--bg-tint); border-radius: 10px;
}
.strip__item strong { display: block; font-size: 15px; color: var(--ink); font-weight: 800; line-height: 1.3; }
.strip__item span { font-size: 13px; color: var(--muted); }

/* ---------- 8. Bölümler ---------- */
.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.section__title { font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 14px; }
.section__desc { font-size: 17px; margin: 0; }

/* ---------- 9. Hizmetler ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #cfe0ee; }
.card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 13px;
  margin-bottom: 18px; color: #fff; border-radius: 14px;
  background: linear-gradient(140deg, var(--navy), var(--teal-dark));
  box-shadow: 0 6px 16px rgba(19,51,84,.22);
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { font-size: 15px; margin-bottom: 16px; }
.card__list { border-top: 1px solid var(--line); padding-top: 15px; }
.card__list li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.card__list li:last-child { margin-bottom: 0; }
.card__list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 9px;
  border-left: 2.4px solid var(--teal-dark); border-bottom: 2.4px solid var(--teal-dark);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ---------- 10. Süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 24px 26px;
}
.step::after {
  content: ''; position: absolute; top: 50px; right: -18px; width: 12px; height: 12px;
  border-top: 2.4px solid #c6d6e4; border-right: 2.4px solid #c6d6e4;
  transform: rotate(45deg);
}
.step:last-child::after { display: none; }
.step__num {
  display: inline-block; margin-bottom: 14px;
  font-size: 30px; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--navy), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; margin: 0; }

/* ---------- 11. Hakkımızda ---------- */
.about { max-width: 740px; margin: 0 auto; text-align: center; }
.about p { font-size: 16.5px; }

.checklist {
  display: block; width: max-content; max-width: 100%;
  text-align: left; margin: 28px auto 32px;
}
.checklist li {
  position: relative; padding-left: 34px; margin-bottom: 13px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-tint);
}
.checklist li::after {
  content: ''; position: absolute; left: 6.5px; top: 8px; width: 9px; height: 5px;
  border-left: 2.2px solid var(--teal-dark); border-bottom: 2.2px solid var(--teal-dark);
  transform: rotate(-45deg);
}

/* ---------- 13. S.S.S. ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head .section__title { font-size: clamp(26px, 3.2vw, 34px); }
.faq__head .section__desc { font-size: 16px; margin-bottom: 22px; }

.faq__list { display: flex; flex-direction: column; gap: 12px; }
.acc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.acc[open] { border-color: #cfe0ee; box-shadow: var(--shadow-md); }
.acc summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 19px 56px 19px 22px;
  font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.45;
  transition: color var(--t);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--navy); }
.acc summary::after {
  content: ''; position: absolute; right: 24px; top: 25px;
  width: 10px; height: 10px;
  border-right: 2.4px solid var(--teal-dark); border-bottom: 2.4px solid var(--teal-dark);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--t);
}
.acc[open] summary::after { transform: rotate(-135deg); }
.acc__body { padding: 0 22px 20px; }
.acc__body p { font-size: 15.5px; margin: 0; }

/* ---------- 14. CTA ---------- */
.cta {
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(139,190,228,.26), transparent 60%),
    linear-gradient(140deg, var(--navy), var(--navy-dark));
  color: #fff; padding: 60px 0;
}
.cta__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
.cta h2 { color: #fff; font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 8px; max-width: 22ch; }
.cta p { color: rgba(255,255,255,.8); margin: 0; font-size: 16.5px; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 15. İletişim ---------- */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.contact__form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-md);
}
.contact__info {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 28px;
}
.info { display: flex; gap: 15px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.contact__info .info:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.info__icon {
  width: 42px; height: 42px; flex: none; padding: 10px; border-radius: 12px;
  color: #fff; background: linear-gradient(140deg, var(--navy), var(--teal-dark));
  display: grid; place-items: center;
}
.info strong { display: block; font-size: 13px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.info a, .info span { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.info a:hover { color: var(--teal-dark); }

/* ---------- 16. Footer ---------- */
.footer { background: var(--navy-dark); color: rgba(255,255,255,.7); }
.footer__inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding: 62px 24px 46px;
}
.footer__brand p { font-size: 14.5px; margin: 18px 0 0; max-width: 34ch; }
.footer__col h3 {
  font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
}
.footer__col li { margin-bottom: 9px; font-size: 14.5px; line-height: 1.6; }
.footer__col a { color: rgba(255,255,255,.7); }
.footer__col a:hover { color: var(--blue-light); }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px; padding: 9px; border-radius: 10px;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  transition: background var(--t), color var(--t), transform var(--t);
}
.social a:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer__bottom-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; font-size: 13.5px;
}

/* ---------- 17. Sabit butonlar ---------- */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; padding: 14px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform var(--t), box-shadow var(--t);
}
.fab--wa { background: #25d366; }
.fab:hover { transform: scale(1.07); color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.4); }

.mobile-call { display: none; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1024px) {
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq__head { position: static; }
  .contact { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2)::after { display: none; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .topbar { display: none; }
  .btn--phone { display: none; }
  .burger { display: flex; }

  .header__actions { margin-left: auto; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav.is-open { max-height: 460px; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; }
  .nav__list a { padding: 13px 12px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__list li:last-child a { border-bottom: none; }

  .grid--3 { grid-template-columns: 1fr 1fr; }
  .strip__inner { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  .section { padding: 60px 0; }
  .header__inner { min-height: 66px; }
  .logo img { height: 36px; }
  .logo--light img { height: 46px; }
  .btn--cta { display: none; }

  .hero { padding: 56px 0 64px; }
  .hero__desc { font-size: 16.5px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .grid--3 { grid-template-columns: 1fr; }
  .strip__inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact__form, .contact__info { padding: 24px 20px; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 44px 24px 36px; }
  .footer__bottom-inner { flex-direction: column; gap: 8px; }

  /* Mobilde alt arama çubuğu */
  .fab { bottom: 78px; right: 16px; width: 52px; height: 52px; padding: 13px; }
  .mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: 15px; background: var(--navy); color: #fff;
    font-size: 16px; font-weight: 700;
    box-shadow: 0 -4px 20px rgba(0,0,0,.16);
  }
  .mobile-call:hover { color: #fff; }
  .mobile-call svg { width: 19px; height: 19px; }
  body { padding-bottom: 56px; }
}

/* ---------- Giriş animasyonu ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   19. Köpük Kutusu (interaktif baloncuklar)
   ============================================================ */
.bubbles { background: linear-gradient(180deg, #e8f1f9 0%, #fff 62%); }

.foam {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center;
}

/* --- Sahne --- */
.foam__stage {
  position: relative; overflow: hidden;
  min-height: 320px; padding: 26px 20px;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 260px at 78% 8%, rgba(63,119,164,.55), transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 55%, #1c4c7a 100%);
  box-shadow: var(--shadow-lg);
}

/* --- Baloncuk --- */
.bubble {
  width: var(--s); height: var(--s); flex: none;
  display: grid; place-items: center;
  font-size: calc(var(--s) * .34); line-height: 1;
  padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.92), rgba(255,255,255,.3) 34%, rgba(255,255,255,.06) 60%),
    rgba(255,255,255,.06);
  box-shadow: inset 0 -6px 14px rgba(255,255,255,.22), 0 6px 18px rgba(0,0,0,.16);
  animation: floaty 4.6s ease-in-out infinite;
  animation-delay: var(--d);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bubble:hover { transform: scale(1.09); box-shadow: inset 0 -6px 14px rgba(255,255,255,.3), 0 10px 24px rgba(0,0,0,.24); }
.bubble:active { transform: scale(.94); }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.bubble.is-popped {
  animation: pop .42s cubic-bezier(.3,.9,.4,1) forwards;
  pointer-events: none;
}
@keyframes pop {
  0%   { transform: scale(1);   opacity: 1; }
  45%  { transform: scale(1.35); opacity: .75; border-color: rgba(255,255,255,.95); }
  100% { transform: scale(.15); opacity: 0; }
}

/* Patlayınca dışa açılan halka */
.bubble::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7); opacity: 0; pointer-events: none;
}
.bubble { position: relative; }
.bubble.is-popped::after { animation: ring .5s ease-out forwards; }
@keyframes ring {
  0%   { opacity: .8; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(1.9); }
}

/* --- Bilgi paneli --- */
.foam__panel { display: flex; flex-direction: column; gap: 18px; }

.foam__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; text-align: center; box-shadow: var(--shadow-md);
  min-height: 216px; display: flex; flex-direction: column; justify-content: center;
}
.foam__card.is-fresh { animation: fadeUp .35s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.foam__emoji { display: block; font-size: 44px; line-height: 1; margin-bottom: 14px; }
.foam__card h3 { font-size: 21px; margin-bottom: 8px; }
.foam__card p  { font-size: 15.5px; margin: 0; }

.foam__progress { display: flex; flex-direction: column; gap: 8px; }
.foam__meter { height: 8px; border-radius: 99px; background: var(--bg-tint); overflow: hidden; }
.foam__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  border-radius: 99px; transition: width .4s ease;
}
.foam__count { font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: center; }

.foam__reset { align-self: center; }
.foam__reset[hidden] { display: none; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .foam { grid-template-columns: 1fr; gap: 22px; }
  .foam__stage { min-height: 300px; }
  .foam__card { min-height: 0; padding: 26px 22px; }
}

@media (max-width: 640px) {
  .foam__stage { padding: 22px 14px; gap: 10px; min-height: 260px; }
  .bubble { width: calc(var(--s) * .74); height: calc(var(--s) * .74); font-size: calc(var(--s) * .26); }
  .foam__emoji { font-size: 38px; }
  .foam__card h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .bubble.is-popped { opacity: 0; transform: scale(.15); animation: none; }
  .bubble.is-popped::after { animation: none; }
  .foam__card.is-fresh { animation: none; }
}