/* =====================================================================
   TEMA 4 — YUMUŞAK PASTEL
   Sıcak pastel degradeler, çok yuvarlak köşeler, hareketli "blob" görsel,
   ortalanmış hap menü, hizmetler iki sütun kart, baloncuk adımlar.
   RENKSOFT MEDYA
   ===================================================================== */
html[data-skin="pastel"] {
  --bg: #fdf6f0; --surface: #ffffff; --ink: #3a3654; --muted: #7a7593; --line: #ece4f2;
  --navy: #3a3654; --navy-2: #6c5ce7; --flame: #ff7b72; --flame-soft: #ffe7e2; --ok: #2bb39a;
  --mint: #c9f2e6; --lilac: #e6defd; --peach: #ffe1d1; --sky: #d8ecff; --lemon: #fff3c4;
  --ill-bg: #efe9ff; --on-flame: #fff; --r: 22px; --w: 1160px;
  --f-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  --f-mono: "Nunito", system-ui, sans-serif;
  --soft: 0 18px 40px -18px rgba(108,92,231,.28), 0 2px 6px rgba(58,54,84,.05);
  color-scheme: light;
}
[data-skin="pastel"] body {
  font-size: 17px;
  background:
    radial-gradient(600px 400px at 0% 0%, #ffe3ec, transparent 70%),
    radial-gradient(700px 500px at 100% 10%, #e3ecff, transparent 70%),
    radial-gradient(700px 500px at 50% 100%, #e2f8ef, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
[data-skin="pastel"] ::selection { background: var(--lilac); }
[data-skin="pastel"] h1, [data-skin="pastel"] h2, [data-skin="pastel"] h3 { font-weight: 600; letter-spacing: -.01em; }

/* --- Ortalanmış hap menü --- */
[data-skin="pastel"] header { background: transparent; border: 0; padding-top: 14px; }
[data-skin="pastel"] .bar {
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; box-shadow: var(--soft); padding: 0 10px 0 14px; min-height: 64px; max-width: calc(var(--w) - 40px);
}
[data-skin="pastel"] .brand svg { border-radius: 50%; overflow: hidden; }
[data-skin="pastel"] .brand svg rect { rx: 20; }
[data-skin="pastel"] .brand b { font-family: var(--f-display); font-weight: 600; }
[data-skin="pastel"] nav { margin: 0 auto; }
[data-skin="pastel"] nav a { border-radius: 999px; font-weight: 700; color: var(--muted); }
[data-skin="pastel"] nav a:hover { background: var(--lilac); color: var(--navy-2); }
[data-skin="pastel"] .phone { color: var(--navy-2); font-weight: 800; }

/* --- Düğmeler --- */
[data-skin="pastel"] .btn {
  border-radius: 999px; padding: 14px 26px; font-weight: 800;
  background: linear-gradient(135deg, #ff9a8b, #ff6fa3); box-shadow: 0 12px 24px -10px rgba(255,111,163,.7);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
[data-skin="pastel"] .btn:hover { filter: none; transform: translateY(-3px) scale(1.03); }
[data-skin="pastel"] .btn.ghost { background: #fff; color: var(--navy-2); box-shadow: 0 0 0 2px var(--lilac), var(--soft); }

/* --- Hero: görsel solda blob içinde --- */
[data-skin="pastel"] .hero { padding: 60px 0 80px; }
[data-skin="pastel"] .hero-grid { grid-template-columns: .95fr 1.05fr; gap: 60px; }
[data-skin="pastel"] .hero-grid > div:last-child { order: -1; position: relative; }
[data-skin="pastel"] .hero-grid > div:last-child::before {
  content: ""; position: absolute; inset: -6% -4% -2% -6%; z-index: -1;
  background: linear-gradient(135deg, #ffd6e4, #d9d0ff 50%, #c9f2e6);
  border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; animation: blob 14s ease-in-out infinite alternate;
}
@keyframes blob {
  50% { border-radius: 40% 60% 62% 38% / 42% 58% 42% 58%; transform: rotate(8deg); }
  100% { border-radius: 55% 45% 35% 65% / 60% 40% 60% 40%; transform: rotate(-4deg); }
}
[data-skin="pastel"] .hero-ill { background: rgba(255,255,255,.55); border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%; padding: 30px; box-shadow: var(--soft); }
[data-skin="pastel"] .photo-note { text-align: center; }
[data-skin="pastel"] .eyebrow {
  display: inline-block; font: 800 .78rem var(--f-body); letter-spacing: .06em; color: var(--navy-2);
  background: var(--lilac); padding: 8px 14px; border-radius: 999px; text-transform: none;
}
[data-skin="pastel"] .eyebrow::before { content: "✦ "; color: var(--flame); }
[data-skin="pastel"] h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.05; }
[data-skin="pastel"] h1 em {
  color: var(--flame); position: relative; white-space: nowrap;
  background: linear-gradient(transparent 62%, #ffe08a 62%, #ffe08a 90%, transparent 90%);
}
[data-skin="pastel"] .from-strip { background: none; border: 0; gap: 12px; overflow: visible; }
[data-skin="pastel"] .from-strip div { border-radius: 20px; text-align: center; padding: 16px 10px; box-shadow: var(--soft); }
[data-skin="pastel"] .from-strip div:nth-child(1) { background: var(--peach); }
[data-skin="pastel"] .from-strip div:nth-child(2) { background: var(--sky); }
[data-skin="pastel"] .from-strip div:nth-child(3) { background: var(--mint); }
[data-skin="pastel"] .from-strip b { font: 600 1.7rem var(--f-display); }
[data-skin="pastel"] .ticks li { background: #fff; padding: 6px 14px; border-radius: 999px; box-shadow: var(--soft); font-weight: 700; }
[data-skin="pastel"] .ticks li::before { content: "♥"; color: var(--flame); }

/* --- Bölüm başlıkları --- */
[data-skin="pastel"] section { padding: 80px 0; }
[data-skin="pastel"] .sec-head { text-align: center; margin: 0 auto 44px; }
[data-skin="pastel"] .sec-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
[data-skin="pastel"] .pay-hint { margin: 16px auto 0; border: 0; border-radius: 18px; background: var(--lemon); text-align: left; }

/* --- Hizmetler: iki sütun kartlar --- */
[data-skin="pastel"] #services .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 26px; align-items: start; }
[data-skin="pastel"] #services .sec-head { grid-column: 1 / -1; }
[data-skin="pastel"] .svc {
  display: block; padding: 28px; border: 0; background: #fff; border-radius: 32px; box-shadow: var(--soft); position: relative;
}
[data-skin="pastel"] .svc:last-child:nth-child(even) { grid-column: 1 / -1; }
[data-skin="pastel"] .svc .ill { position: static; width: 120px; height: 120px; border-radius: 50%; margin: -70px 0 14px; border: 6px solid #fff; box-shadow: var(--soft); display: grid; place-items: center; }
[data-skin="pastel"] #services .wrap { padding-top: 10px; row-gap: 80px; }
[data-skin="pastel"] .svc:nth-of-type(3n+1) .ill { background: var(--peach); }
[data-skin="pastel"] .svc:nth-of-type(3n+2) .ill { background: var(--sky); }
[data-skin="pastel"] .svc:nth-of-type(3n) .ill { background: var(--mint); }
[data-skin="pastel"] .svc-body h3 { font-size: 1.5rem; }
[data-skin="pastel"] .rates { border: 0; border-collapse: separate; border-spacing: 0 8px; background: none; }
[data-skin="pastel"] .rates td { border: 0; background: #faf7ff; }
[data-skin="pastel"] .rates td:first-child { border-radius: 18px 0 0 18px; }
[data-skin="pastel"] .rates td:last-child { border-radius: 0 18px 18px 0; }
[data-skin="pastel"] .rates tr.hot td { background: var(--flame-soft); }
[data-skin="pastel"] .rates td.p { font: 600 1.3rem var(--f-display); color: var(--navy-2); vertical-align: middle; }
[data-skin="pastel"] .tag { background: var(--navy-2); color: #fff; font-family: var(--f-body); font-weight: 800; text-transform: none; letter-spacing: 0; }
[data-skin="pastel"] .incl { grid-template-columns: 1fr 1fr; gap: 8px; }
[data-skin="pastel"] .incl li { background: #f6fbf9; border-radius: 14px; padding: 8px 12px; font-size: .93rem; font-weight: 600; }
[data-skin="pastel"] .incl li::before { content: "✓"; color: var(--ok); }
[data-skin="pastel"] .pick { color: var(--navy-2); font-family: var(--f-body); font-weight: 800; }

/* --- Paketler: renkli kartlar --- */
[data-skin="pastel"] #bundles { background: transparent; border: 0; }
[data-skin="pastel"] .bundles { gap: 20px; }
[data-skin="pastel"] .bundle { border: 0; border-radius: 28px; padding: 24px; box-shadow: var(--soft); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
[data-skin="pastel"] .bundle:nth-child(4n+1) { background: #fff0ea; }
[data-skin="pastel"] .bundle:nth-child(4n+2) { background: #eef4ff; }
[data-skin="pastel"] .bundle:nth-child(4n+3) { background: #eafaf3; }
[data-skin="pastel"] .bundle:nth-child(4n) { background: #f4efff; }
[data-skin="pastel"] .bundle:hover { transform: translateY(-6px) rotate(-.6deg); }
[data-skin="pastel"] .chip { background: #fff; color: var(--navy); font: 800 .76rem var(--f-body); padding: 5px 11px; }
[data-skin="pastel"] .chip.g { background: #fff; color: #e2574d; }
[data-skin="pastel"] .chip.e { background: #fff; color: var(--navy-2); }
[data-skin="pastel"] .chip.c { background: #fff; color: var(--ok); }
[data-skin="pastel"] .bp > div { border-top: 2px dashed rgba(58,54,84,.1); }
[data-skin="pastel"] .bp b { font: 600 1.2rem var(--f-display); color: var(--navy); }

/* --- Adımlar: baloncuklar --- */
[data-skin="pastel"] .steps { gap: 26px; }
[data-skin="pastel"] .steps li { border: 0; border-radius: 30px; text-align: center; padding: 30px 24px; box-shadow: var(--soft); position: relative; }
[data-skin="pastel"] .steps li::before {
  content: counter(s); width: 64px; height: 64px; margin: -62px auto 16px; display: grid; place-items: center; border-radius: 50%;
  font: 600 1.6rem var(--f-display); letter-spacing: 0; color: #fff; border: 6px solid var(--bg);
  background: linear-gradient(135deg, #ff9a8b, #ff6fa3);
}
[data-skin="pastel"] .steps li:nth-child(2)::before { background: linear-gradient(135deg, #a18cd1, #6c5ce7); }
[data-skin="pastel"] .steps li:nth-child(3)::before { background: linear-gradient(135deg, #5ee7c4, #2bb39a); }
[data-skin="pastel"] #how .steps { margin-top: 40px; }

/* --- SSS --- */
[data-skin="pastel"] .faq { margin: 0 auto; }
[data-skin="pastel"] .faq details { border: 0; border-radius: 24px; box-shadow: var(--soft); margin-bottom: 14px; }
[data-skin="pastel"] .faq summary { padding: 20px 64px 20px 24px; }
[data-skin="pastel"] .faq summary::after {
  content: "+"; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; right: 18px;
  background: var(--lilac); color: var(--navy-2); font: 700 1.2rem var(--f-body); transition: transform .3s, background .3s;
}
[data-skin="pastel"] .faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); background: var(--flame); color: #fff; }
[data-skin="pastel"] .faq details p { padding: 0 24px 20px; }

/* --- Blog --- */
[data-skin="pastel"] .post-card { border: 0; border-radius: 28px; box-shadow: var(--soft); transition: transform .3s; }
[data-skin="pastel"] .post-card:hover { transform: translateY(-5px); }
[data-skin="pastel"] .post-card time { color: var(--navy-2); font-family: var(--f-body); font-weight: 800; }
[data-skin="pastel"] .page-head { background: transparent; border: 0; text-align: center; }

/* --- İletişim --- */
[data-skin="pastel"] #contact {
  background: linear-gradient(135deg, #ffe3ec, #e8e1ff 50%, #dff6ee); color: var(--ink);
  border-radius: 48px; margin: 40px 16px 30px; padding: 70px 0;
}
[data-skin="pastel"] #contact h2, [data-skin="pastel"] #contact h3 { color: var(--ink); }
[data-skin="pastel"] #contact .lede { color: var(--muted); }
[data-skin="pastel"] #contact .eyebrow { color: var(--navy-2); }
[data-skin="pastel"] #contact .sec-head { text-align: left; margin: 0; }
[data-skin="pastel"] .cc { background: rgba(255,255,255,.75); border: 0; border-radius: 20px; }
[data-skin="pastel"] .cc span { color: var(--muted); font-family: var(--f-body); font-weight: 800; }
[data-skin="pastel"] .copy { background: var(--lilac); color: var(--navy-2); border-radius: 999px; font-weight: 800; }
[data-skin="pastel"] .copy:hover { background: #d8ccff; }
[data-skin="pastel"] form#book { border-radius: 34px; padding: 32px; box-shadow: var(--soft); }
[data-skin="pastel"] input, [data-skin="pastel"] select, [data-skin="pastel"] textarea { border-radius: 16px; border: 2px solid transparent; background: #f7f4fd; padding: 13px 16px; }
[data-skin="pastel"] input:focus, [data-skin="pastel"] select:focus, [data-skin="pastel"] textarea:focus { outline: 0; border-color: #c9bbff; background: #fff; }
[data-skin="pastel"] .cart { border-radius: 20px; border: 2px dashed #d8ccff; background: #fbf9ff; }
[data-skin="pastel"] .btn.pay { background: #ffc439; color: #111; box-shadow: 0 12px 24px -10px rgba(255,180,0,.7); }
[data-skin="pastel"] form#book > .btn.ghost { color: var(--navy-2); }
[data-skin="pastel"] .form-ok { border-radius: 16px; }
[data-skin="pastel"] .cartbar { background: var(--navy-2); box-shadow: 0 16px 34px -10px rgba(108,92,231,.7); }

/* --- Alt bilgi --- */
[data-skin="pastel"] footer { background: transparent; border: 0; }
[data-skin="pastel"] footer .wrap { justify-content: center; text-align: center; }

/* --- Mobil --- */
@media (max-width: 1000px) {
  [data-skin="pastel"] .bar { margin: 0 12px; }
}
@media (max-width: 860px) {
  [data-skin="pastel"] .hero-grid { grid-template-columns: 1fr; }
  [data-skin="pastel"] .hero { padding: 40px 0 50px; }
  [data-skin="pastel"] .hero-grid > div:last-child { max-width: 420px; margin: 0 auto 10px; }
  [data-skin="pastel"] .hero-copy { text-align: center; }
  [data-skin="pastel"] .hero-copy .lede { margin-inline: auto; }
  [data-skin="pastel"] .from-strip { margin-inline: auto; }
  [data-skin="pastel"] .hero-ctas, [data-skin="pastel"] .ticks { justify-content: center; }
  [data-skin="pastel"] .svc .ill { max-width: none; }
  [data-skin="pastel"] .steps { gap: 50px; margin-top: 50px; }
  [data-skin="pastel"] #contact { border-radius: 32px; margin: 20px 8px; padding: 50px 0; }
}
@media (max-width: 480px) {
  [data-skin="pastel"] .incl { grid-template-columns: 1fr; }
  [data-skin="pastel"] .svc { padding: 22px 18px; border-radius: 26px; }
  [data-skin="pastel"] .from-strip { gap: 8px; }
  [data-skin="pastel"] .from-strip b { font-size: 1.35rem; }
  [data-skin="pastel"] h1 em { white-space: normal; }
}