/* ================================================
   İçerik Okulu — Araçlar ve eğitim sayfaları için açık tema
   tools-nav.php ile sayfa stillerinden SONRA yüklenir; koyu tema değişkenlerini
   ana sayfa paletine (kabuk.css: --b, --gece, --ink, --lila, --cizgi) çevirir.
   Sayfa içinde sabit koyu/beyaz renk kalan yerler aşağıda tek tek düzeltilir.
   ================================================ */

:root {
    /* tools-shared.css */
    --bg-primary:         #ffffff;
    --bg-secondary:       var(--lila);
    --bg-card:            #ffffff;
    --bg-card-hover:      #fafaff;
    --border-color:       var(--cizgi);
    --border-hover:       #c9caf6;
    --text-primary:       var(--ink);
    --text-secondary:     var(--ink2);
    --text-muted:         var(--ink3);
    --accent:             var(--b);
    --accent-dim:         var(--b50);
    --coming-soon-bg:     #f8f8fb;
    --coming-soon-border: var(--cizgi);
    --lock-color:         #8a8ea3;
    /* sayfaların kendi değişkenleri (ai-thumbnail, boyut rehberi) */
    --accent-glow:        rgba(49, 48, 222, .14);
    --accent-cyan:        #0e7490;
    --accent-green:       #047857;
    --bg-tertiary:        var(--lila);
    --bg-elevated:        #ffffff;
    --border-subtle:      #eef0f6;
    --border-default:     var(--cizgi);
    --text-tertiary:      var(--ink3);
    --accent-primary:     var(--b);
    --accent-secondary:   #4d4cf0;
    --shadow-sm:          0 1px 2px rgba(20, 21, 43, .06);
    --shadow-md:          0 6px 18px -6px rgba(20, 21, 43, .12);
    --shadow-lg:          0 18px 40px -16px rgba(20, 21, 43, .18);
}

html { background: #fff; }
body { background: #fff; color: var(--ink); }

/* Koyu adalar: zemini koyu olan bölümler (hero bantları, eğitim kutusu, 3D tuval etiketleri).
   İçlerinde yazı değişkenleri açık tonlara döner. Zemini koyu kalan yeni bir kutu eklenirse buraya ekle. */
.hero, .lp-hero, .tool-page .tool-header, .lp-crumbs, .cta-box, .canvas-label, .canvas-hint,
.faq-section, section.faq, .final-cta-box {
    --text-primary:   #ffffff;
    --text-secondary: #c9c8f5;
    --text-muted:     #a9a8e0;
    --accent:         #a5a4ff;
    --accent-dim:     rgba(165, 164, 255, .14);
    --border-color:   rgba(255, 255, 255, .16);
    --bg-card:        rgba(255, 255, 255, .06);
    --bg-secondary:   rgba(255, 255, 255, .06);
    color: #fff;
}
/* Adalarda --accent açık lila (yazı vurgusu için); ana düğmeler marka morunda kalır */
:is(.hero, .lp-hero, .tool-page .tool-header, .cta-box, .final-cta-box) :is(.cta-btn-primary, .generate-btn, .btn-analyze, .btn-generate, .copy-btn) {
    background: var(--b);
    color: #fff;
}

/* Hero: ana sayfadaki gibi menünün devamı olan lacivert bant.
   Kutu ortalanmış olsa da bant box-shadow + clip-path ile tam genişliğe yayılır. */
.hero, .lp-hero, .tool-page .tool-header, .lp-crumbs {
    background: var(--gece);
    box-shadow: 0 0 0 100vmax var(--gece);
    clip-path: inset(0 -100vmax);
}
/* Eski sabit menü 64px yer tutuyordu; yeni menü akışta olduğu için üst boşluklar kısalır */
.hero { padding-top: 72px; }
.tool-page .tool-header { padding-top: 56px; padding-bottom: 48px; margin-bottom: 40px; }
.hero + .breadcrumb { padding-top: 28px; }
.hero::before { background: radial-gradient(ellipse at center, rgba(91, 84, 255, .35) 0%, rgba(49, 48, 222, .12) 55%, transparent 75%); }

/* Kartlar: açık zeminde hafif gölge */
.tool-card { box-shadow: 0 1px 2px rgba(20, 21, 43, .04); }
.tool-card:hover { box-shadow: 0 14px 34px -18px rgba(49, 48, 222, .35); }

/* Rozetler: açık zeminde okunur tonlar */
.badge-free    { color: var(--yesil); background: var(--yesil50); }
.badge-popular { color: #a35a00; background: #fff3dc; }
.badge-new     { color: #1d4ed8; background: #e8efff; }
.coming-soon-overlay, .coming-soon-badge { background: #eef0f6; color: #6b7086; }

/* Araçlar sayfası sonundaki eğitim kutusu: ana sayfanın CTA'sı gibi lacivert */
.cta-box {
    background: radial-gradient(520px 300px at 85% 0%, rgba(91, 84, 255, .35), transparent 70%), var(--gece);
    border-color: transparent;
}
.cta-box .cta-btn-secondary, .cta-box [class*="secondary"] { color: #fff; border-color: rgba(255, 255, 255, .35); }


/* Eğitim açılış sayfaları (egitimler/_lp.php) */
.lp-hero { padding-top: 56px; }
.lp-hero h1 .hl { color: #8b8af5; -webkit-text-fill-color: #8b8af5; background: none; }

/* ================================================
   Bölüm ritmi — ana sayfadaki gibi beyaz → lila → lacivert sırası.
   Uzun sayfalar düz metin duvarına dönmesin diye bölümler zeminle ayrılır.
   ================================================ */
.ys-alt { margin-top: 0; }

/* Tam genişlik lila bant (ortalanmış kutular için box-shadow + clip-path) */
.bant-lila, .section:has(.coming-soon), .seo-section {
    background: var(--lila);
    box-shadow: 0 0 0 100vmax var(--lila);
    clip-path: inset(0 -100vmax);
}

/* Lacivert bant: SSS bölümleri */
.faq-section, section.faq {
    background: radial-gradient(700px 360px at 85% 0%, rgba(91, 84, 255, .28), transparent 70%), var(--gece);
    border-top: 0;
}
:is(.faq-section, section.faq) .faq-item { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
:is(.faq-section, section.faq) .faq-question { color: #fff; background: transparent; }
:is(.faq-section, section.faq) .faq-question:hover { background: rgba(255, 255, 255, .05); }
:is(.faq-section, section.faq) .section-tag { color: #c7c6ff; background: rgba(165, 164, 255, .14); border-color: rgba(165, 164, 255, .3); }

/* Son çağrı kutusu: lacivert */
.final-cta-box {
    background: radial-gradient(520px 300px at 85% 0%, rgba(91, 84, 255, .35), transparent 70%), var(--gece);
    border-color: transparent;
    box-shadow: 0 30px 60px -30px rgba(13, 11, 56, .55);
}
.final-cta-box h2 { color: #fff; }

/* Araç sayfaları (Hook Üretici, 3D Kamera): formül kartları lila, rehber beyaz, diğer araçlar lila */
.seo-content:has(.content-grid), .related-tools { background: var(--lila); border-top: 0; }
.content-card { background: #fff; box-shadow: 0 1px 2px rgba(20, 21, 43, .04); }
.seo-detail h3 { padding-left: 14px; border-left: 3px solid var(--b); }

/* Araçlar ana sayfası */
.section:has(.coming-soon) { padding-top: 64px; margin-bottom: 0; }
.cta-section { padding-top: 72px; }
.seo-section { max-width: 1000px; border-top: 0; padding: 72px 24px 80px; }
.seo-section h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.seo-section > p { font-size: 1rem; color: var(--ink2); max-width: 760px; }
.seo-kartlar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.seo-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 26px 26px 22px; }
.seo-kart-ikon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--b50); font-size: 1.35rem; margin-bottom: 14px; }
.seo-section .seo-kart h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--ink); }
.seo-section .seo-kart p { margin: 0; font-size: .95rem; color: var(--ink2); line-height: 1.75; }
@media (max-width: 720px) { .seo-kartlar { grid-template-columns: 1fr; } }

/* Eğitim açılış sayfaları: zemin sırası şablondan gelir (zemin-lila / zemin-beyaz) */
.proof-bar { background: #fff; }
/* tools-shared.css'teki .section 1200px sınırı zemini kesmesin; içerik genişliğini .container belirler */
.section.zemin-lila, .section.zemin-beyaz { max-width: none; }
.section.zemin-lila, .pricing.zemin-lila { background: var(--lila); }
.section.zemin-beyaz, .pricing.zemin-beyaz { background: #fff; }
.zemin-lila .lp-prose { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 40px 44px; box-shadow: 0 18px 40px -28px rgba(20, 21, 43, .18); }
.lp-prose h2 { position: relative; padding-top: 16px; }
.lp-prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--b); }
.zemin-lila :is(.learn-card, .for-card, .module, .lp-step, .lp-link) { background: #fff; }
@media (max-width: 640px) { .zemin-lila .lp-prose { padding: 26px 20px; } }

/* ================================================
   SVG ikonlar (emoji yerine) — ana sayfadaki çizgi ikon dili: lila kutu, mor çizgi.
   İkon 1em boyutunda; kutunun font-size'ı boyutu belirler. Koyu adalarda --accent açık lilaya döner.
   ================================================ */
.ys-ik { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.14em; }
.ys-ik-tamam   { color: var(--yesil); }
.ys-ik-uyari   { color: #b45309; }
.ys-ik-tehlike { color: #dc2626; }
:is(.tool-card-icon, .content-card-icon, .tool-header-icon, .popup-icon, .for-card-icon, .angle-card-icon,
    .prompt-header-icon, .category-icon, .ty-icon, .ty-link-icon, .seo-kart-ikon) {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); background: var(--accent-dim);
}
.content-card:nth-child(n) .content-card-icon { background: var(--accent-dim); }
:is(.input-icon, .card-title > span, .related-link .icon, .canvas-label-icon, .output-title-icon) { color: var(--accent); }
.output-title-icon { display: inline-flex; align-items: center; justify-content: center; }
.breakdown-icon { display: inline-flex; align-items: center; justify-content: center; }
.testimonial-stars { display: inline-flex; gap: 2px; color: var(--amber); }
.tool-card-icon:is(.red, .blue, .green, .purple, .orange, .cyan) { background: var(--accent-dim); }

/* Mobil: .hero/.cta-box ::before ışıkları (700/600px) sayfayı yana kaydırıyordu */
.hero,.cta-box{overflow:clip}
/* Mobil: iPhone'un odaklanınca yakınlaştırmaması için girdiler 16px; küçük etiketler okunur boyutta */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  .hero-stat-label,.section-count,.tool-tag,.hint-chip,.results-count,.check-item-desc,.gauge-labels span,.er-live-label span,
  .section-label,.legend-item span,.canvas-label-en,.canvas-hint,.angle-card-en,.prompt-label{font-size:12.5px!important}
  .tool-card-badge,.coming-soon-badge{font-size:12px!important}
  .tool-header-back{padding-top:10px;padding-bottom:10px}
}