/* Simply Words — RENKLİ tema. Sadece <html class="renkli"> iken etkin (?tema=renkli).
   Sade tema style.css'te; bu dosya onun üstüne renkli bölüm zeminleri, dalgalı geçişler ve
   kart başına farklı pastel tonlar ekler. Kaldırmak için <link> satırını silmek yeterli. */

html.renkli {
  --r-pink: #ff5c9a;
  --r-violet: #6a5cf6;
  --r-blue: #3b82f6;
  --r-teal: #14b8a6;
  --r-orange: #ff9f43;
  --r-yellow: #ffd23f;
  --r-purple: #a855f7;
  --r-green: #22c55e;
  --wave-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C220 96 470 6 720 34s520 58 720 8V100H0z' fill='%23ffffff'/%3E%3C/svg%3E");
  --wave-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C220 96 470 6 720 34s520 58 720 8V100H0z' fill='%23fff6e5'/%3E%3C/svg%3E");
  --wave-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C220 96 470 6 720 34s520 58 720 8V100H0z' fill='%23ffc94a'/%3E%3C/svg%3E");
  --wave-top-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 54C220 4 470 94 720 66s520-58 720-8V0H0z' fill='%23ffffff'/%3E%3C/svg%3E");
}
html.renkli main > section { position: relative; }
html.renkli main > section > .wrap { position: relative; z-index: 1; }

/* 1 — HERO: canlı gradyan + yüzen renkli şekiller + dalgalı alt kenar */
html.renkli .hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 210, 63, .55) 0 46px, transparent 47px),
    radial-gradient(circle at 46% 86%, rgba(20, 184, 166, .45) 0 30px, transparent 31px),
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .28) 0 70px, transparent 71px),
    radial-gradient(circle at 70% 60%, rgba(255, 92, 154, .35) 0 160px, transparent 161px),
    linear-gradient(135deg, #5b5cf2 0%, #8f5ef0 38%, #e45fb0 72%, #ff9a5a 100%);
  color: #fff;
  padding-bottom: 70px;
}
html.renkli .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  background: var(--wave-white) center bottom / 100% 100% no-repeat;
}
html.renkli .hero h1 { color: #fff; }
html.renkli .hero .grad-text { background: none; -webkit-text-fill-color: #ffe066; color: #ffe066; }
html.renkli .hero .eyebrow {
  color: #fff; background: rgba(255, 255, 255, .2); padding: 6px 14px; border-radius: 999px;
}
html.renkli .hero p.lead { color: rgba(255, 255, 255, .94); }
html.renkli .hero .note { color: rgba(255, 255, 255, .85); }
html.renkli .hero .store { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); }
html.renkli .hero-art img { filter: drop-shadow(0 30px 40px rgba(40, 10, 90, .35)); }

/* 2 — SAYILAR: hero'nun üstüne binen beyaz kart, her sayı farklı renk */
html.renkli .stats { border: 0; background: #fff; }
html.renkli .stats .wrap {
  background: #fff; border-radius: 26px; margin-top: -64px; position: relative; z-index: 3;
  box-shadow: 0 24px 50px -24px rgba(70, 40, 140, .45);
}
html.renkli .stats .stat b { background: none; -webkit-text-fill-color: currentColor; }
html.renkli .stats .stat:nth-child(1) b { color: var(--r-pink); }
html.renkli .stats .stat:nth-child(2) b { color: var(--r-violet); }
html.renkli .stats .stat:nth-child(3) b { color: var(--r-teal); }
html.renkli .stats .stat:nth-child(4) b { color: var(--r-orange); }
html.renkli .stats .stat:nth-child(5) b { color: var(--r-purple); }

/* 3 — ÜÇ ADIM: pastel kartlar */
html.renkli main > section:nth-of-type(3) { padding-top: 64px; }
html.renkli .step { border: 0; box-shadow: none; border-radius: 26px; }
html.renkli .step:nth-child(1) { background: #ffe4ef; }
html.renkli .step:nth-child(2) { background: #e7e5ff; }
html.renkli .step:nth-child(3) { background: #ffefd6; }
html.renkli .step:nth-child(1) .num { background: var(--r-pink); }
html.renkli .step:nth-child(2) .num { background: var(--r-violet); }
html.renkli .step:nth-child(3) .num { background: var(--r-orange); }

/* 4 — ÖZELLİKLER: mavi-mor bant, üst ve alt dalga */
html.renkli #ozellikler {
  background:
    radial-gradient(circle at 8% 30%, rgba(255, 255, 255, .12) 0 90px, transparent 91px),
    radial-gradient(circle at 94% 75%, rgba(255, 210, 63, .25) 0 60px, transparent 61px),
    linear-gradient(160deg, #4f6cf7 0%, #6a5cf6 55%, #8b5cf6 100%);
  padding: 130px 0 140px;
}
html.renkli #ozellikler::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 80px;
  background: var(--wave-top-white) center top / 100% 100% no-repeat;
}
html.renkli #ozellikler::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
  background: var(--wave-cream) center bottom / 100% 100% no-repeat;
}
html.renkli #ozellikler .head h2 { color: #fff; }
html.renkli .feat { border: 0; border-radius: 26px; box-shadow: 0 20px 40px -24px rgba(20, 10, 80, .55); }
html.renkli .feat:nth-child(1) .ico { background: var(--r-pink); }
html.renkli .feat:nth-child(2) .ico { background: var(--r-teal); }
html.renkli .feat:nth-child(3) .ico { background: var(--r-orange); }
html.renkli .feat:nth-child(4) .ico { background: var(--r-purple); }
html.renkli .feat:nth-child(5) .ico { background: var(--r-blue); }
html.renkli .feat:nth-child(6) .ico { background: #f5b700; }

/* 5 — KART KOLEKSİYONU: sıcak krem zemin, nadirliğe göre renkli çerçeveler */
html.renkli main > section:nth-of-type(5) {
  background:
    radial-gradient(circle at 6% 20%, rgba(255, 159, 67, .25) 0 40px, transparent 41px),
    radial-gradient(circle at 48% 92%, rgba(168, 85, 247, .18) 0 26px, transparent 27px),
    #fff6e5;
  padding-bottom: 130px;
}
html.renkli main > section:nth-of-type(5)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C220 96 470 6 720 34s520 58 720 8V100H0z' fill='%23f1e9ff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
html.renkli .collect .eyebrow { color: var(--r-orange); }
html.renkli .rar span { color: #fff; border: 0; }
html.renkli .rar span:nth-child(1), html.renkli .rar span:nth-child(2) { background: var(--r-green); }
html.renkli .rar span:nth-child(3), html.renkli .rar span:nth-child(4) { background: var(--r-blue); }
html.renkli .rar span:nth-child(5), html.renkli .rar span:nth-child(6) { background: var(--r-orange); }
html.renkli .rar span:nth-child(7), html.renkli .rar span:nth-child(8) { background: var(--r-purple); }
html.renkli .rar span.k { background: #241a3d; color: #ffd34c; }
html.renkli .cards-row figure { border: 4px solid #fff; }
html.renkli .cards-row figure:nth-child(1) { border-color: var(--r-green); }
html.renkli .cards-row figure:nth-child(2) { border-color: var(--r-blue); }
html.renkli .cards-row figure:nth-child(3) { border-color: var(--r-orange); }
html.renkli .cards-row figure:nth-child(4) { border-color: var(--r-purple); }
html.renkli .cards-row figure:nth-child(5),
html.renkli .cards-row figure:nth-child(6) { border-color: #241a3d; }
html.renkli .cards-row figure:nth-child(1) figcaption { background: var(--r-green); color: #fff; }
html.renkli .cards-row figure:nth-child(2) figcaption { background: var(--r-blue); color: #fff; }
html.renkli .cards-row figure:nth-child(3) figcaption { background: var(--r-orange); color: #fff; }
html.renkli .cards-row figure:nth-child(4) figcaption { background: var(--r-purple); color: #fff; }
html.renkli .cards-row figure:nth-child(5) figcaption,
html.renkli .cards-row figure:nth-child(6) figcaption { background: #241a3d; color: #ffd34c; }

/* 6 — PLUS AKADEMİ: lila zemin, her paket farklı pastel */
html.renkli #plus { background: linear-gradient(180deg, #f1e9ff 0%, #ffe8f3 100%); }
html.renkli #plus .eyebrow { color: var(--r-purple); }
html.renkli .pack { border: 0; border-radius: 20px; box-shadow: 0 10px 24px -18px rgba(70, 40, 140, .5); }
html.renkli .pack:nth-child(1) { background: #ffd9e8; }
html.renkli .pack:nth-child(2) { background: #dbe8ff; }
html.renkli .pack:nth-child(3) { background: #fff0c2; }
html.renkli .pack:nth-child(4) { background: #d9f7ea; }
html.renkli .pack:nth-child(5) { background: #ece0ff; }
html.renkli .pack:nth-child(6) { background: #ffe1cc; }
html.renkli .pack:nth-child(7) { background: #d4f2ff; }
html.renkli .pack span { color: var(--ink-soft); }

/* 7 — PLANLAR: renkli üst şeritler */
html.renkli .plan { border: 0; border-top: 8px solid var(--r-teal); box-shadow: 0 18px 40px -26px rgba(60, 40, 120, .45); }
html.renkli .plan:nth-child(1) .tag { color: var(--r-teal); }
html.renkli .plan.star { border-top: 8px solid var(--r-violet); background: #f5f2ff; border-left: 0; border-right: 0; border-bottom: 0; }
html.renkli .plan.star .tag { color: var(--r-violet); }
html.renkli .plan:nth-child(3) { border-top-color: var(--r-orange); background: #fff6ec; }
html.renkli .plan:nth-child(3) .tag { color: var(--r-orange); }

/* 8 — SSS: açık mavi zemin, beyaz kutular */
html.renkli main > section:nth-of-type(8) { background: #eaf4ff; }
html.renkli .faq details {
  background: #fff; border: 0; border-radius: 18px; padding: 18px 22px; margin-bottom: 12px;
  box-shadow: 0 10px 24px -20px rgba(40, 60, 140, .5);
}
html.renkli .faq summary::after { color: var(--r-blue); }

/* 9 — ÇAĞRI: güneşli sarı-turuncu bant */
html.renkli .cta {
  background:
    radial-gradient(circle at 10% 30%, rgba(255, 255, 255, .35) 0 50px, transparent 51px),
    radial-gradient(circle at 88% 70%, rgba(255, 92, 154, .35) 0 70px, transparent 71px),
    linear-gradient(135deg, #ffc94a 0%, #ff9a5a 100%);
  padding-top: 120px;
}
html.renkli .cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 54C220 4 470 94 720 66s520-58 720-8V0H0z' fill='%23eaf4ff'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
html.renkli .cta h2, html.renkli .cta p { color: #3a1d0a; }

/* ALT BİLGİ: koyu mor */
html.renkli footer { background: #2a1f4d; border: 0; color: #c9c0e8; }
html.renkli footer nav a { color: #fff; }

/* YASAL SAYFALAR */
html.renkli body:has(main.doc) { background: linear-gradient(180deg, #f3efff 0, #fff 420px); }
html.renkli .doc h1 { background: linear-gradient(90deg, #5b5cf2, #e45fb0, #ff9a5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.renkli .doc h2 { color: var(--r-violet); }
html.renkli .doc .box { background: #fff1d6; }
html.renkli .doc table th { background: #f1ecff; }

@media (max-width: 760px) {
  html.renkli .stats .wrap { margin: -48px 16px 0; }
  html.renkli #ozellikler { padding: 100px 0 110px; }
}