/* Kid English with Turkan — ortak web tasarımı (katil, destek, gizlilik, şartlar, hesap silme).
     Renkler/yarıçaplar/gölgeler uygulamanın tasarım tokenlarıdır (lib/core/theme/). Yalnız açık tema. */
  :root{
    --cream-0:#FFFDF8; --cream-50:#FFF8EC; --cream-100:#FDF1E0; --white:#FFFFFF;
    --honey-100:#FFEDC2; --honey-500:#F0B030;
    --coral-100:#FFE2D8; --coral-600:#D63D13; --coral-700:#C33409;
    --cocoa-300:#C7A77A; --cocoa-500:#835104; --cocoa-600:#6B4105; --cocoa-700:#543205; --cocoa-800:#3A2408;
    --sand-200:#F3E4CE; --sand-300:#E3D0B4;
    --mint-100:#D9F6EA; --mint-600:#1A9C6C;
    --sky-100:#DCF1FB; --sky-500:#2FB3E8; --grape-100:#ECE4FD; --bubble-100:#FFE3EF;
    --r-sm:12px; --r-md:16px; --r-lg:22px; --r-card:28px; --r-sheet:36px; --r-pill:999px;
    --sticker:0 4px 0 var(--cocoa-500);
    --sticker-lg:0 5px 0 var(--cocoa-500);
    --sticker-pressed:0 1px 0 var(--cocoa-500);
    --soft:0 6px 18px rgba(90,60,18,.10);
    --font-display:"Baloo 2",ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
    --font-body:Mulish,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --gutter:clamp(16px,5vw,20px);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--cream-50);color:var(--cocoa-700);font-family:var(--font-body);font-size:17px;line-height:1.6;overflow-wrap:anywhere}
  h1,h2,h3{font-family:var(--font-display);color:var(--cocoa-800);margin:0;line-height:1.2}
  p{margin:0}
  a{color:var(--coral-700);text-underline-offset:3px}
  a:focus-visible{outline:3px solid var(--sky-500);outline-offset:3px}
  .icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .wrap{max-width:560px;margin:0 auto;padding:0 var(--gutter)}
  .grow{flex:1;min-width:0}
  .nb{white-space:nowrap}

  /* Kahraman alanı: ana sayfadaki gibi bal → krem yıkama, alt köşeler yuvarlak. */
  .hero{background:linear-gradient(to bottom,var(--honey-100),var(--cream-50));color:var(--cocoa-800);border-bottom:2px solid var(--sand-200);border-radius:0 0 var(--r-sheet) var(--r-sheet);padding:32px 0 28px;text-align:center}
  .status{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--cocoa-500);border-radius:var(--r-pill);padding:4px 14px 4px 11px;font-weight:800;font-size:14px;color:var(--cocoa-800)}
  .status .icon{width:18px;height:18px;color:var(--cocoa-500)}
  .hero h1{font-size:clamp(31px,9vw,42px);font-weight:800;letter-spacing:-.01em;margin:12px 0 8px}
  .lead{font-size:clamp(17px,4.8vw,19px);max-width:28em;margin:0 auto}

  /* Uygulamada neler var: pastel çipler (çocuk bölümünün renkleri). */
  .features{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .features li{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:var(--r-pill);font-weight:700;font-size:15px;line-height:1.3;color:var(--cocoa-800);overflow-wrap:normal}
  .features .icon{width:18px;height:18px;color:var(--cocoa-600)}
  .price-note{font-size:15px;margin:12px auto 0;max-width:30em}
  .btn.hero-cta{max-width:340px;margin:18px auto 4px}

  main{padding:28px 0 8px}
  #adimlar{scroll-margin-top:16px}
  section{margin:0 0 36px}
  .h2{font-size:clamp(23px,6.6vw,27px);font-weight:800;margin-bottom:8px}
  .sub{color:var(--cocoa-600);margin-bottom:16px}

  .card{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-card);box-shadow:var(--soft);padding:22px clamp(16px,5vw,22px)}
  .card p+p{margin-top:10px}
  .tip{background:var(--cream-100);border-radius:var(--r-card);padding:16px clamp(14px,4.4vw,18px);display:flex;gap:10px;align-items:flex-start;margin-bottom:18px}
  .tip>.icon{color:var(--coral-600);margin-top:1px}
  .tip h3{font-size:18px;font-weight:700;margin-bottom:6px}
  .tip ul{margin:0;padding-left:1.05em;font-size:15.5px;line-height:1.55}
  .tip li+li{margin-top:8px}

  /* Adımlar: bal renkli sticker numara + tek büyük düğme (uygulamadaki KewButton). */
  .steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
  .step{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-card);box-shadow:var(--soft);padding:20px clamp(14px,4.4vw,20px) 22px}
  .step-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .num{width:46px;height:46px;flex:none;border-radius:50%;background:var(--honey-500);border:3px solid var(--cocoa-500);box-shadow:var(--sticker);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:23px;color:var(--cocoa-800);line-height:1}
  .step h3{font-size:clamp(20px,5.8vw,23px);font-weight:800}
  .step p{font-size:16.5px}
  .note{font-size:15px;color:var(--cocoa-600);margin-top:8px}
  .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:58px;margin-top:16px;padding:10px 16px;background:var(--honey-500);color:var(--cocoa-800);border:2px solid var(--cocoa-500);border-radius:var(--r-pill);box-shadow:var(--sticker);font-family:var(--font-display);font-weight:700;font-size:clamp(17px,4.9vw,19px);line-height:1.2;text-align:center;text-decoration:none;overflow-wrap:normal;-webkit-tap-highlight-color:transparent}
  .btn .icon{width:20px;height:20px}
  .btn:active{transform:translateY(3px);box-shadow:var(--sticker-pressed)}
  .done{display:flex;gap:10px;align-items:flex-start;background:var(--mint-100);border-radius:var(--r-card);padding:16px clamp(14px,4.4vw,18px);margin-top:18px}
  .done>.icon{color:var(--mint-600);margin-top:1px}
  .done b{font-family:var(--font-display);font-size:19px;color:var(--cocoa-800);display:block;line-height:1.25;margin-bottom:2px}

  /* Görüş bölümü */
  .feedback-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
  .feedback-head .h2{margin:0}
  .tile{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--coral-100);color:var(--coral-700)}
  .prose p+p{margin-top:12px}
  .example{margin-top:14px;padding:12px 16px;border-left:4px solid var(--honey-500);background:var(--white);border-radius:0 var(--r-md) var(--r-md) 0}
  .h3{font-size:20px;font-weight:700;margin:24px 0 10px}
  .channels{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  .channels li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-lg);box-shadow:var(--soft);padding:14px;font-size:16px;line-height:1.5}
  .channels .tile{width:36px;height:36px;background:var(--honey-100);color:var(--cocoa-700)}
  .channels .tile .icon{width:19px;height:19px}
  .channels b{color:var(--cocoa-800)}
  .ask{background:var(--honey-100);color:var(--cocoa-800);border:2px solid var(--cocoa-500);border-radius:var(--r-card);padding:18px clamp(16px,5vw,22px);margin-top:20px}
  .ask .h3{margin:0 0 8px}
  .ask ul{margin:0 0 12px;padding-left:1.1em}
  .ask li+li{margin-top:6px}
  .ask p{font-size:15.5px;color:var(--cocoa-800)}

  /* Sık sorulanlar: hepsi açık, gizli içerik yok. */
  .faq{padding-top:4px;padding-bottom:4px}
  .faq dl{margin:0}
  .faq dt{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--cocoa-800);line-height:1.3;padding-top:16px}
  .faq dd{margin:6px 0 0;padding-bottom:16px;font-size:16px;border-bottom:1px solid var(--sand-200)}
  .faq dd:last-child{border-bottom:0}

  footer{border-top:2px solid var(--sand-200);background:var(--cream-0);padding:24px 0 32px;text-align:center;font-size:15px;color:var(--cocoa-600)}
  footer nav{margin:10px 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:2px}
  footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 8px}
  footer .dot{color:var(--cocoa-300)}
  @media (max-width:400px){
    footer nav{column-gap:10px}
    footer .dot{display:none}
  }

  /* Marka logosu (assets/images/brand/logo.webp'nin kopyası). */
  .logo{display:block;width:min(230px,62vw);height:auto;margin:0 auto 14px}

  /* Kısa kahraman: yasal ve destek sayfaları. */
  .hero-sm{padding:24px 0 22px}
  .hero-sm .logo{width:min(150px,42vw);margin-bottom:6px}
  .hero-sm h1{font-size:clamp(23px,6.6vw,31px);font-weight:800;margin:6px 0 0}
  .wrap-wide{max-width:760px}

  /* Yasal metin kartı: okunaklı satırlar, başlıklar arası nefes. */
  .doc{padding:26px clamp(18px,5vw,34px)}
  .doc h2{font-size:clamp(20px,5.6vw,23px);font-weight:800;margin:28px 0 8px}
  .doc h2:first-child{margin-top:0}
  .doc p+p,.doc ul+p,.doc ol+p,.doc p+ul,.doc p+ol{margin-top:10px}
  .doc ul,.doc ol{margin:8px 0 0;padding-left:1.3em}
  .doc li+li{margin-top:8px}
  .doc li::marker{color:var(--cocoa-500)}
  .meta{font-size:15px;line-height:1.55;color:var(--cocoa-800);background:var(--cream-100);border-radius:var(--r-md);padding:12px 16px;margin-bottom:18px}
  .center{text-align:center}
  .btn.btn-inline{display:inline-flex;width:auto;max-width:100%;min-width:min(100%,300px);padding:10px 20px;font-size:clamp(14px,4vw,18px);white-space:nowrap;overflow-wrap:normal}
  /* Dar ekran: taban kuraldan SONRA gelmeli (aynı özgüllükte sonra gelen kazanır). */
  @media (max-width:360px){
    .btn.btn-inline{font-size:14px;padding:10px 12px}
    .btn.btn-inline .icon{display:none}
  }
  @media (max-width:300px){
    .btn.btn-inline{font-size:12px;padding:10px 8px}
  }

  @media (prefers-reduced-motion:no-preference){
    html{scroll-behavior:smooth}
    .btn{transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s cubic-bezier(.34,1.56,.64,1)}
  }
  @media (min-width:700px){
    .hero{padding:48px 0 38px}
    .hero.hero-sm{padding:30px 0 26px}
    main{padding-top:36px}
  }