/* ═══ [v603] KENDİNİ & ONU TANI — ortak tasarım sistemi (V2 brifi 25.08) ═══
   Tüm /kendini-onu-tani/ sayfaları bu dosyayı kullanır. Zemin beyaz/açık,
   ana renk mevcut mor; kartlarda bol boşluk, büyük radius, hafif gölge. */
:root{
  --mor:#3B1866; --mor-orta:#5B2E96; --mor-yum:#8b5fc4; --mor-cokacik:#f5f1fb;
  --murek:#231433; --gri:#6b6377; --cizgi:rgba(59,24,102,.14);
  --yesil:#25D366; --beyaz:#ffffff; --zemin:#fbfafd; --uyari:#8a2a2a; --uyari-zemin:#fdf1f1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Figtree',sans-serif;background:var(--zemin);color:var(--murek);line-height:1.6;-webkit-font-smoothing:antialiased}
.serif{font-family:'Spectral',serif}
.dis{max-width:1120px;margin:0 auto;padding:0 20px}
.dar{max-width:780px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
h1{font-family:'Spectral',serif;font-size:clamp(28px,4.4vw,42px);font-weight:600;line-height:1.2;color:var(--mor);margin-bottom:16px}
h2{font-family:'Spectral',serif;font-size:clamp(24px,3.6vw,32px);font-weight:600;line-height:1.28;margin-bottom:12px;color:var(--mor)}
h3{font-size:18px;font-weight:800;color:var(--mor);margin:22px 0 8px}
p{margin-bottom:12px}
.altyazi{font-size:16px;color:var(--gri);max-width:660px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:800;border-radius:15px;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-mor{background:var(--mor);color:#fff;font-size:16px;padding:15px 24px;box-shadow:0 10px 26px rgba(59,24,102,.28)}
.btn-cerceve{background:#fff;color:var(--mor);font-size:15px;padding:14px 22px;border:2px solid var(--mor)}
.btn-yesil{background:var(--yesil);color:#fff;font-size:16px;padding:15px 24px;box-shadow:0 10px 24px rgba(37,211,102,.3)}
.btn-soluk{background:none;color:var(--mor);font-size:14.5px;font-weight:700;padding:10px 6px}
.mikro{font-size:12.5px;color:var(--gri);margin-top:8px}
.kart{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:18px;box-shadow:0 2px 14px rgba(35,20,51,.05)}

/* ── ÜST BAR + MENÜ ── */
.bar{position:sticky;top:0;z-index:50;background:rgba(251,250,253,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--cizgi)}
.bar .dis{display:flex;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px;gap:12px}
.logo{font-family:'Spectral',serif;font-weight:600;font-size:17px;color:var(--mor);text-decoration:none;white-space:nowrap}
.logo em{font-style:normal;color:var(--mor-yum)}
.bar-nav{display:flex;align-items:center;gap:4px}
.bar-nav a{font-size:14px;font-weight:700;color:var(--murek);text-decoration:none;padding:8px 11px;border-radius:10px}
.bar-nav a:hover{background:var(--mor-cokacik);color:var(--mor)}
.bar-nav a.wa{color:#fff;background:var(--yesil);font-weight:800}
.menu-dugme{display:none;background:none;border:1.5px solid var(--cizgi);border-radius:10px;padding:7px 11px;font-size:17px;cursor:pointer;color:var(--mor)}
.cekmece{display:none;position:fixed;inset:0;background:rgba(35,20,51,.4);z-index:60}
.cekmece.acik{display:block}
.cekmece-ic{position:absolute;top:0;right:0;width:min(300px,84vw);height:100%;background:#fff;padding:22px;display:flex;flex-direction:column;gap:6px}
.cekmece-ic a{font-size:16px;font-weight:700;color:var(--murek);text-decoration:none;padding:13px 12px;border-radius:12px;border:1px solid var(--cizgi)}
.cekmece-kapat{align-self:flex-end;background:none;border:none;font-size:22px;cursor:pointer;color:var(--gri);padding:4px 8px}

/* ── KIRINTI (breadcrumb) ── */
.kirinti{font-size:13px;color:var(--gri);padding:16px 0 0}
.kirinti a{color:var(--mor);text-decoration:none;font-weight:700}

/* ── GÜVEN ŞERİDİ ── */
.guven{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.guven span{font-size:13px;font-weight:700;color:var(--murek);background:#fff;border:1px solid var(--cizgi);padding:8px 13px;border-radius:999px}

/* ── HERO (ana sayfa) ── */
.hero{padding:44px 0 36px}
.hero-vurgu{font-size:17px;font-weight:600;margin-bottom:14px;max-width:560px}
.hero-p{font-size:16px;color:var(--gri);margin-bottom:8px;max-width:600px}
.giris-sec{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.giris-kart{padding:24px;display:flex;flex-direction:column;gap:8px;position:relative}
.giris-kart.birincil{border:2px solid var(--mor);box-shadow:0 10px 30px rgba(59,24,102,.12)}
.giris-kart .roz{position:absolute;top:-11px;left:20px;background:var(--mor);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;padding:4px 11px;border-radius:999px}
.giris-kart .b{font-family:'Spectral',serif;font-size:20px;font-weight:600;color:var(--mor)}
.giris-kart .a{font-size:14.5px;color:var(--gri);flex:1}
.giris-baslik{font-size:16px;font-weight:800;color:var(--mor);margin-top:28px}

/* ── MİNİ TEST ── */
.test-kutu{padding:24px;position:relative;overflow:hidden}
.test-kutu::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--mor),var(--mor-yum))}
.test-sinir{font-size:12.5px;color:var(--gri);margin-bottom:16px}
.test-ilerleme{font-family:'Spline Sans Mono',monospace;font-size:12.5px;font-weight:700;color:var(--mor-yum);margin-bottom:8px}
.test-cubuk{height:5px;background:var(--mor-cokacik);border-radius:99px;overflow:hidden;margin-bottom:18px}
.test-cubuk i{display:block;height:100%;background:var(--mor);transition:width .25s ease}
.test-soru{font-size:17px;font-weight:700;min-height:66px;margin-bottom:16px}
.test-secenek{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.test-secenek button{font-family:inherit;font-size:16px;font-weight:800;padding:14px 4px;border-radius:12px;border:1.8px solid var(--cizgi);background:#fff;color:var(--murek);cursor:pointer}
.test-secenek button:hover{border-color:var(--mor);background:var(--mor-cokacik)}
.test-uc{display:flex;justify-content:space-between;font-size:11.5px;color:var(--gri);margin-top:7px}
.test-geri{margin-top:14px;background:none;border:none;font-size:13px;font-weight:700;color:var(--gri);cursor:pointer;padding:6px 2px}

/* ── SONUÇ ÇUBUKLARI ── */
.eksen{margin-bottom:14px}
.eksen-ust{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:5px}
.eksen-ust .sol{color:var(--mor)} .eksen-ust .sag{color:var(--gri)}
.eksen-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--mor-cokacik)}
.eksen-bar .a{background:var(--mor)} .eksen-bar .b{background:var(--mor-yum);opacity:.45}
.sonuc-baslik{font-family:'Spectral',serif;font-size:21px;font-weight:600;color:var(--mor);margin:4px 0 14px}
.sonuc-parag{font-size:14.5px;background:var(--mor-cokacik);border:1px solid var(--cizgi);border-radius:13px;padding:14px 16px;margin:16px 0}
.kopru{margin-top:18px;padding-top:16px;border-top:1px solid var(--cizgi)}
.kopru .b{font-family:'Spectral',serif;font-size:17px;font-weight:600;color:var(--mor);margin-bottom:10px}

/* ── FOTO ANALİZ BİLEŞENİ ── */
.demo{padding:22px;position:relative;overflow:hidden}
.demo::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--mor),var(--mor-yum))}
.demo-baslik{font-size:17px;font-weight:800;color:var(--mor);margin-bottom:14px}
.demo-sec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.demo-sec button{font-family:inherit;font-size:15px;font-weight:700;padding:13px 10px;border-radius:13px;border:1.8px solid var(--cizgi);background:#fff;color:var(--murek);cursor:pointer}
.demo-sec button.aktif{border-color:var(--mor);background:var(--mor-cokacik);color:var(--mor)}
.yukle{display:block;margin-top:14px;border:2px dashed rgba(59,24,102,.3);border-radius:14px;padding:24px 14px;text-align:center;cursor:pointer;background:var(--mor-cokacik)}
.yukle:hover{border-color:var(--mor)}
.yukle.kapali{opacity:.45;pointer-events:none}
.yukle-ik{font-size:28px;margin-bottom:6px}
.yukle-b{font-weight:800;color:var(--mor);font-size:15.5px}
.demo-alt{font-size:13px;color:var(--gri);margin-top:12px}
.gizli{display:none !important}
.demo-durum{margin-top:14px;font-size:14px;font-weight:700;color:var(--mor-orta)}
.demo-onizle{width:80px;height:80px;border-radius:16px;object-fit:cover;border:2px solid var(--cizgi);display:block;margin:14px auto 0}
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid var(--mor-yum);border-top-color:transparent;border-radius:50%;animation:dn .8s linear infinite;vertical-align:-3px;margin-right:7px}
@keyframes dn{to{transform:rotate(360deg)}}
.riza{margin-top:12px;background:var(--uyari-zemin);border:1px solid rgba(138,42,42,.25);border-radius:13px;padding:13px 14px}
.riza label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:700;color:var(--murek);cursor:pointer}
.riza input{margin-top:3px;width:17px;height:17px;flex:none}
.riza .aciklama{font-size:12px;color:var(--gri);font-weight:400;margin-top:8px}
.sonuc-kart{border:1px solid var(--cizgi);border-radius:14px;padding:14px 16px;background:#fff;margin-top:10px}
.sonuc-ust{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gri);font-weight:700}
.sonuc-etiket{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor);margin:2px 0 4px}
.sonuc-metin{font-size:14px;color:var(--murek)}
.sonuc-cizgi{border:none;border-top:1px solid var(--cizgi);margin:18px 0 14px}
.sonuc-not{font-size:12px;color:var(--gri);margin-top:12px}
.kilitli{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.kilitli span{font-size:12.5px;font-weight:700;color:var(--mor-orta);background:var(--mor-cokacik);border:1px solid var(--cizgi);padding:6px 11px;border-radius:999px}
.kilitli span::before{content:'🔒 ';font-size:11px}

/* ── [v605] FOTOĞRAF ANALİZİ BİRİNCİL KUTU + PROFİL SONUCU ── */
.demo.birincil{border:3px solid var(--mor);box-shadow:0 18px 44px rgba(59,24,102,.22);padding:26px}
.demo.birincil::before{height:8px}
.analiz-etiket{display:inline-block;background:var(--mor);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;padding:5px 12px;border-radius:999px;margin-bottom:12px}
/* [v624 — brif §7] Sonuç ekranının başlığı: "İlk profilin hazır ✨" + alt
   açıklama. Kartın üstünde, kartla aynı hizada; ekranı açan cümle burası. */
.sonuc-basi{margin-bottom:14px}
.sonuc-basi .sb-b{font-family:'Spectral',serif;font-size:clamp(23px,4.4vw,31px);font-weight:600;color:var(--mor);line-height:1.2}
.sonuc-basi .sb-a{font-size:14.5px;color:var(--gri);line-height:1.65;margin-top:8px;max-width:640px}
.profil-kart{background:var(--mor);color:#fff;border-radius:20px;padding:26px 24px;margin-bottom:18px}
.profil-ust{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.profil-ad{font-family:'Spectral',serif;font-size:clamp(26px,5vw,36px);font-weight:600;line-height:1.15;margin:8px 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profil-ad .em{font-size:38px}
.profil-oz{font-size:15.5px;color:rgba(255,255,255,.9);line-height:1.6}
.profil-kelime{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.profil-kelime span{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:5px 12px;border-radius:999px}
.profil-rozet{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.profil-rozet span{font-size:12.5px;font-weight:800;background:#fff;color:var(--mor);padding:6px 13px;border-radius:999px}
.ozet-cerceve{background:#fff;border:1px solid var(--cizgi);border-radius:18px;padding:20px 22px}
.ozet-cerceve p{font-size:15px;line-height:1.7;margin-bottom:12px}
.ozet-cerceve p:last-child{margin-bottom:0}
.ozet-giris{font-size:13.5px;color:var(--gri);background:var(--mor-cokacik);border-radius:12px;padding:11px 14px;margin-bottom:16px}
.tamamla{background:var(--mor-cokacik);border:1px solid var(--cizgi);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}
.tamamla-b{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor)}
.tamamla-a{font-size:14.5px;color:var(--murek);line-height:1.6;margin-top:-4px}   /* [v608] */

/* ── İHTİYAÇ KARTLARI (linkli) ── */
.alti{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
a.alti-kart{display:block;padding:20px;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease}
a.alti-kart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(59,24,102,.12)}
.alti .ik{font-size:26px;margin-bottom:8px}
.alti .b{font-weight:800;font-size:16.5px;color:var(--mor);margin-bottom:4px}
.alti .a{font-size:14px;color:var(--gri);font-style:italic}
.alti .git{font-size:12.5px;font-weight:800;color:var(--mor-yum);margin-top:10px;display:block}

/* ── FARK / KULLANIM / MEHMET (V1'den) ── */
.fark{background:var(--mor);color:#fff;border-radius:24px;padding:44px 34px}
.fark h2{color:#fff}
.fark-akis{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0}
.fark-akis .p{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 16px;font-weight:700;font-size:14.5px;margin:0}
.fark-akis .op{font-size:19px;font-weight:800;color:var(--mor-yum)}
.fark-akis .esit{background:#fff;color:var(--mor);border-radius:12px;padding:10px 16px;font-weight:800;font-size:14.5px}
.fark-p{font-size:15px;color:rgba(255,255,255,.85);max-width:680px;font-style:italic;line-height:1.75}
.kul{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.kul .kart{padding:22px}
.kul .b{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor);margin-bottom:5px}
.kul .a{font-size:14.5px;color:var(--gri)}
.kul-kapanis{margin-top:24px;font-family:'Spectral',serif;font-size:19px;font-weight:600;max-width:620px}
.mehmet{display:flex;gap:26px;align-items:center;background:var(--mor-cokacik);border:1px solid var(--cizgi);border-radius:22px;padding:30px}
.mehmet img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 18px rgba(59,24,102,.2)}
.mehmet .ust{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mor-yum);margin-bottom:4px}
.mehmet .ad{font-family:'Spectral',serif;font-size:22px;font-weight:600;color:var(--mor)}
.mehmet .rol{font-size:13.5px;color:var(--gri);margin:3px 0 10px}
.mehmet .p{font-size:14.5px;max-width:560px}

/* ── REHBER KARTLARI V2 ── */
.rehber-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
a.rehber-kart{display:flex;flex-direction:column;gap:7px;padding:20px;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease}
a.rehber-kart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(59,24,102,.12)}
.rehber-kart .kat{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mor-yum)}
.rehber-kart .b{font-weight:800;font-size:16px;color:var(--mor);line-height:1.35}
.rehber-kart .a{font-size:13.5px;color:var(--gri);flex:1}
.rehber-kart .alt{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-top:6px}
.rehber-kart .oku{font-weight:800;color:var(--mor)}
.rehber-kart .tarih{color:var(--gri)}

/* ── MAKALE GÖVDESİ ── */
.makale{padding:26px 0 60px}
.makale-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--gri);margin:8px 0 22px;align-items:center}
.makale-meta b{color:var(--murek)}
.makale p{font-size:16px;line-height:1.75}
.makale h2{margin-top:34px}
.makale ol,.makale ul{margin:0 0 14px 22px;font-size:16px;line-height:1.75}
.makale li{margin-bottom:6px}
.not-kutu{background:var(--mor-cokacik);border-left:4px solid var(--mor);border-radius:0 14px 14px 0;padding:18px 20px;margin:24px 0;font-family:'Spectral',serif;font-size:16.5px;font-style:italic;line-height:1.7}
.not-kutu .kim{display:block;font-family:'Figtree',sans-serif;font-style:normal;font-size:13px;font-weight:800;color:var(--mor-yum);margin-top:10px}
.uyari-kutu{background:var(--uyari-zemin);border:1px solid rgba(138,42,42,.25);border-radius:14px;padding:16px 18px;margin:20px 0;font-size:14.5px}
.uyari-kutu b{color:var(--uyari)}
.kaynaklar{margin-top:36px;border-top:1px solid var(--cizgi);padding-top:18px}
.kaynaklar h2{font-size:20px}
.kaynaklar li{font-size:14px;color:var(--gri)}
.cta-kutu{background:var(--mor);color:#fff;border-radius:20px;padding:28px;margin:30px 0;text-align:center}
.cta-kutu .b{font-family:'Spectral',serif;font-size:21px;font-weight:600;margin-bottom:6px}
.cta-kutu .a{font-size:14.5px;color:rgba(255,255,255,.8);margin-bottom:16px}
.tablo{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.tablo th{background:var(--mor);color:#fff;padding:10px 12px;text-align:left;font-weight:700}
.tablo td{padding:10px 12px;border-bottom:1px solid var(--cizgi)}
.tablo tr:nth-child(even) td{background:var(--mor-cokacik)}

/* ── TOKSİK / İLETİŞİM ARAÇLARI ── */
.madde{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--cizgi)}
.madde .s{flex:1;font-size:15px;font-weight:600}
.madde .sec{display:flex;gap:6px}
.madde .sec button{font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:10px;border:1.5px solid var(--cizgi);background:#fff;cursor:pointer;white-space:nowrap}
.madde .sec button.aktif{border-color:var(--mor);background:var(--mor);color:#fff}
.secim-liste{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.secim-liste button{font-family:inherit;text-align:left;font-size:14.5px;font-weight:700;padding:13px 15px;border-radius:12px;border:1.5px solid var(--cizgi);background:#fff;cursor:pointer}
.secim-liste button.aktif{border-color:var(--mor);background:var(--mor-cokacik);color:var(--mor)}
.oneri{background:var(--mor-cokacik);border:1px solid var(--cizgi);border-radius:14px;padding:16px 18px;margin-top:14px;font-size:14.5px}

/* ═══ [v604 — V3] YENİ BÖLÜMLER ═══ */

/* ── 3 ADIMDA NASIL ÇALIŞIR (§2.1) ── */
.adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.adim{padding:22px;position:relative}
.adim .no{color:var(--mor-yum)}
.adim .b{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor);margin-bottom:6px}
.adim .a{font-size:14.5px;color:var(--gri)}
.adim-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── KIYAS TABLOSU (§2.2) ── */
.kiyas{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.kiyas th{background:var(--mor);color:#fff;padding:11px 13px;text-align:left;font-weight:700}
.kiyas td{padding:12px 13px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.kiyas tr.biz td{background:var(--mor-cokacik);font-weight:600}
.kiyas tr.biz td:first-child{color:var(--mor)}

/* ── [v606] İKİ OKUMA YAN YANA (fotoğraf analizi ↔ 12 soruluk test) ──
   🔴 Sınıf adı .kiyas DEĞİL: o ad yukarıdaki karşılaştırma TABLOSUNA ait
   (index/mbti/enneagram sayfalarındaki <table class="kiyas">). Çakışmasın. */
.capa{display:block;position:relative;top:-84px;height:0;visibility:hidden}
.iki-okuma{margin-top:22px;padding:20px 18px;border-radius:16px;
  background:var(--mor-cokacik);border:1px solid var(--cizgi)}
.io-b{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor);margin-bottom:6px}
.io-giris{font-size:13.5px;color:var(--gri);line-height:1.6;margin-bottom:16px}
.io-satir{background:var(--beyaz);border-radius:12px;padding:12px 13px;margin-bottom:10px}
.io-ust{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.io-ad{font-size:14px;font-weight:800;color:var(--murek)}
.io-chip{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.io-chip.ayni{background:rgba(37,211,102,.16);color:#177a3c}
.io-chip.yakin{background:var(--mor-cokacik);color:var(--mor-orta)}
.io-chip.ayrik{background:var(--uyari-zemin);color:var(--uyari)}
.io-bar{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:12px}
.io-bar .kb-ad{width:88px;flex:none;color:var(--gri);font-weight:700}
/* Çubuk ORTADAN uzar: sol kutup baskınsa sola, sağ kutup baskınsa sağa.
   Ortadaki ince çizgi denge noktasıdır. */
.io-bar .kb-yol{flex:1;height:9px;border-radius:99px;background:var(--mor-cokacik);position:relative}
.io-bar .kb-yol::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--cizgi)}
.io-bar .kb-yol i{position:absolute;top:0;height:100%;border-radius:99px;min-width:2px;max-width:50%}
.io-bar .kb-yol i.sl{right:50%} .io-bar .kb-yol i.sg{left:50%}
.io-bar.foto .kb-yol i{background:var(--mor)}
.io-bar.test .kb-yol i{background:var(--mor-yum)}
.io-bar .kb-pct{width:118px;flex:none;text-align:right;font-weight:700;color:var(--murek)}
.io-ozet{font-size:14.5px;line-height:1.7;color:var(--murek);margin-top:14px}
.io-ozet b{color:var(--mor)}
.io-cta{margin-top:14px}
.io-cta .btn{width:100%}
@media(max-width:520px){
  .io-bar{flex-wrap:wrap}
  .io-bar .kb-ad{width:auto}
  .io-bar .kb-pct{width:auto;flex:1;text-align:left}
  .io-bar .kb-yol{flex-basis:100%;order:3}
}

/* ── [v607] TOKSİK TEST SONUÇ SEVİYESİ + HUNİ (V6 brifi §5/§7) ──
   🔴 Renk TEK BAŞINA anlam taşımaz: seviye her zaman başlıkta açık yazılır
   (renk körlüğü + ekran okuyucu). Renkler yalnız vurgu. */
.seviye{border-radius:16px;padding:18px 18px 16px;border:1px solid var(--cizgi);background:var(--mor-cokacik)}
.seviye .sonuc-baslik{margin-top:0}
.seviye.sv1{background:#f0faf3;border-color:rgba(23,122,60,.22)}
.seviye.sv2{background:#fdf9ec;border-color:rgba(160,120,20,.22)}
.seviye.sv3{background:#fdf4ec;border-color:rgba(176,96,26,.26)}
.seviye.sv4{background:var(--uyari-zemin);border-color:rgba(138,42,42,.26)}
.huni-kart{border:1px solid var(--cizgi);border-radius:16px;padding:18px;margin-top:14px;background:var(--beyaz)}
.huni-kart.birincil{border:2px solid var(--mor);box-shadow:0 8px 26px rgba(59,24,102,.10)}
.huni-kart .hk-b{font-size:17px;font-weight:800;color:var(--mor);margin-bottom:6px}
.huni-kart p{margin:0 0 14px;font-size:14.5px;color:var(--murek);line-height:1.65}
.huni-kart .btn{width:100%}
.mini-ozellik{list-style:none;padding:0;margin:0 0 18px;text-align:left;display:grid;gap:7px}
.mini-ozellik li{font-size:14px;padding-left:22px;position:relative;opacity:.95}
.mini-ozellik li::before{content:'✓';position:absolute;left:0;font-weight:800}

/* ── [v608] V7 SADE ANA SAYFA + REHBER HUB ────────────────────────────
   V7 §4: fotoğraf kutusu sayfanın GÖRSEL MERKEZİ — sıcak krem zemin,
   kalın mor çerçeve, üstünde "BURADAN BAŞLA · ÜCRETSİZ" rozeti.
   §15 renk anayasası: mor = web aksiyonu · yeşil = YALNIZ WhatsApp ·
   sıcak krem = fotoğraf/başlangıç · kırmızı = yalnız risk/uyarı. */
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.09em;color:var(--mor-yum);margin-bottom:10px}
.hero-mikro{font-size:14px;font-weight:800;color:var(--mor);margin:10px 0 4px}
/* ══ [v624 — XYZ B2C brifi §3/§4] "UYGULAMA İNDİRME YOK" ═══════════════════
   Mehmet: "Bu fark saklanmayacak. Bas bas söylenecek." Bu yüzden mikro metin
   değil, çerçeveli ve renkli bir ŞERİT — göz onu atlamasın. Gizlilik satırı
   ise bilerek sessiz: güven verir ama vaatle yarışmaz. */
.hero-fark{margin:14px 0 4px;display:inline-block;background:rgba(59,24,102,.07);border:1.5px solid rgba(59,24,102,.22);border-radius:14px;padding:11px 15px;font-size:15px;line-height:1.6;color:var(--mor)}
.hero-fark b{color:var(--mor)}
.hero-gizli{font-size:12.5px;color:var(--gri);margin-top:8px;max-width:520px;line-height:1.6}
/* Sticky'nin altındaki tek satır (§4③) — buton yükseklik kazanmasın diye
   buton İÇİNDE değil, altında duruyor. */
.yapiskan-mikro{text-align:center;font-size:11.5px;color:var(--gri);margin-top:5px}
/* ══ [v625 — brif §14] 🌊 TALEP RADARI ═══════════════════════════════════
   Mehmet: "küçük ama görünür alan". Bu yüzden mor kart değil, kesikli
   çerçeveli sakin bir kutu — WhatsApp köprüsüyle görsel olarak yarışmaz
   ama gözden de kaçmaz. */
.talep-kutu{margin:16px 0;padding:16px;border:1.5px dashed rgba(59,24,102,.3);border-radius:16px;background:rgba(59,24,102,.035)}
.talep-kutu .tr-b{font-family:'Spectral',serif;font-size:18.5px;font-weight:600;color:var(--mor);line-height:1.3}
.talep-kutu .tr-a{font-size:14px;color:var(--murek);line-height:1.65;margin-top:8px}
.talep-kutu .tr-input{width:100%;margin-top:11px;padding:11px 13px;border:1.5px solid rgba(59,24,102,.25);border-radius:12px;font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;background:#fff;color:var(--murek)}
.talep-kutu .tr-input:focus{outline:none;border-color:var(--mor)}
.talep-kutu .tr-mikro{font-size:12.5px;color:var(--gri);margin-top:9px;line-height:1.6}
.talep-kutu .tr-odul{font-size:13.5px;color:var(--mor);margin-top:8px;line-height:1.6}
.talep-kutu .tr-kod{font-size:12.5px;color:var(--gri);margin-top:9px;font-family:'Spline Sans Mono',monospace}
.talep-kutu .tr-hata{font-size:13px;color:#B23B2A;margin-top:9px;line-height:1.55}
.bar-birincil{background:var(--mor);color:#fff !important;font-weight:800}
.bar-birincil:hover{background:var(--mor-orta);color:#fff !important}
.metin-link{color:var(--mor);font-weight:800;text-decoration:none;font-size:15px}
.metin-link:hover{text-decoration:underline}

/* Fotoğraf kutusu — başlangıç kimliği */
/* 🔴 overflow:visible şart — .demo'nun overflow:hidden'ı üstteki rozeti
   kırpıyordu (25.08.2026 ekran denetimi). */
.demo.baslangic{border:3px solid var(--mor);border-radius:23px;background:#FFF9F3;
  box-shadow:0 16px 40px rgba(59,24,102,.14);padding:26px 22px 22px;margin-top:30px;overflow:visible}
.demo.baslangic::before{height:0}
.demo.baslangic .demo-baslik{margin-top:4px}
.demo.baslangic .yukle{min-height:54px}
.baslangic-rozet{position:absolute;top:-13px;left:22px;background:var(--mor);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:6px 13px;border-radius:99px}

/* İkinci adım (doğrulama) bölümü — görsel ağırlığı bilerek düşük */
.ikincil-bolum{padding-top:18px}
.ikincil-bolum h2{font-size:23px}

/* Sorun kartları (§6) — kartın TAMAMI tıklanabilir */
.sorun-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.sorun-kart{display:block;padding:20px;text-decoration:none;transition:transform .12s,box-shadow .12s}
.sorun-kart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,20,51,.10)}
.sorun-kart .b{display:block;font-family:'Spectral',serif;font-size:18px;font-weight:600;color:var(--mor);margin-bottom:8px}
.sorun-kart .a{display:block;font-size:14px;color:var(--murek);line-height:1.6}
.sorun-kart .c{display:block;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--mor-orta)}

/* Değer kartları (§8) */
.deger-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.deger-kart{padding:18px}
.deger-kart .ik{display:block;font-size:24px;margin-bottom:8px}
.deger-kart .b{display:block;font-size:15.5px;font-weight:800;color:var(--mor);margin-bottom:4px}
.deger-kart .a{display:block;font-size:13.5px;color:var(--gri);line-height:1.55}

/* Ana sayfadaki 3 örnek rehber bağlantısı (§9) */
.rehber-ozet{display:grid;gap:10px;margin-top:20px;max-width:720px}
.ozet-link{display:block;padding:15px 18px;border:1px solid var(--cizgi);border-radius:14px;
  background:var(--beyaz);color:var(--murek);text-decoration:none;font-size:15.5px;font-weight:700}
.ozet-link:hover{border-color:var(--mor-yum);color:var(--mor)}

/* Kompakt uzman kartı (§11) — özgeçmiş duvarı değil */
.uzman-kompakt{display:flex;gap:18px;align-items:flex-start;max-width:760px;
  border:1px solid var(--cizgi);border-radius:18px;padding:20px;background:var(--beyaz)}
.uzman-kompakt img{width:74px;height:74px;border-radius:16px;object-fit:cover;flex:none}
.uzman-kompakt .b{font-size:17px;font-weight:800;color:var(--mor)}
.uzman-kompakt p{margin:6px 0 8px;font-size:14.5px;line-height:1.65;color:var(--murek)}

/* Bilgi sayfası köprü kutusu (§18) */
.kopru-kutu{border:2px solid var(--mor);border-radius:18px;padding:22px;margin:30px 0;background:#FFF9F3}
.kopru-kutu .b{font-family:'Spectral',serif;font-size:21px;font-weight:600;color:var(--mor);margin-bottom:8px}
.kopru-kutu p{font-size:15px;line-height:1.7;margin-bottom:16px}

/* Rehber hub kümeleri (§10) */
.kume-baslik{margin-top:34px;font-size:22px}
.yazar-alt{display:flex;gap:14px;align-items:flex-start;margin-top:36px;padding-top:22px;border-top:1px solid var(--cizgi)}
.yazar-alt img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.yazar-alt .b{font-size:15.5px;font-weight:800;color:var(--mor)}
.yazar-alt .a{font-size:13.5px;color:var(--gri);margin:4px 0 6px}

@media(max-width:860px){
  .sorun-liste,.deger-liste{grid-template-columns:1fr}
  .uzman-kompakt{flex-direction:column}
  .demo.baslangic{padding:24px 16px 18px}
}

/* ── SSS (§2.4) ── */
.sss{margin-top:22px;border-top:1px solid var(--cizgi)}
.sss-kutu{border-bottom:1px solid var(--cizgi)}
.sss-soru{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:700;color:var(--murek);padding:17px 34px 17px 2px;position:relative}
.sss-soru::after{content:'+';position:absolute;right:6px;top:15px;font-size:20px;color:var(--mor-yum);font-weight:800}
.sss-kutu.acik .sss-soru::after{content:'–'}
.sss-cevap{display:none;font-size:15px;color:var(--gri);padding:0 6px 18px 2px;line-height:1.7}
.sss-kutu.acik .sss-cevap{display:block}

/* ── REHBER SÜZGECİ (§3) ── */
.cipler{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.cip{font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--cizgi);background:#fff;color:var(--murek);cursor:pointer}
.cip.aktif{background:var(--mor);border-color:var(--mor);color:#fff}
.rehber-kart .sure{font-size:11.5px;font-weight:700;color:var(--gri);background:var(--mor-cokacik);
  border-radius:999px;padding:3px 9px;margin-left:8px;white-space:nowrap}

/* ── KISA CEVAP KUTUSU (§12) ── */
.kisa-cevap{background:var(--mor-cokacik);border:1px solid var(--cizgi);border-radius:16px;padding:18px 20px;margin:18px 0 26px}
.kisa-cevap .et{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mor-yum);margin-bottom:6px}
.kisa-cevap p{font-size:15.5px;margin:0;line-height:1.7}

/* ── SONUÇ KARTLARINDA TEYİT SORUSU (§4) ── */
.teyit{font-size:13px;color:var(--gri);margin-top:9px;padding-top:9px;border-top:1px dashed var(--cizgi)}
.teyit b{color:var(--mor)}

/* ── CÜMLE KURUCU (§6) ── */
.kur-adim{margin-bottom:16px}
.kur-adim .et{font-size:13px;font-weight:800;color:var(--mor);margin-bottom:8px}
.kur-secim{display:flex;flex-wrap:wrap;gap:8px}
.kur-secim button{font-family:inherit;font-size:14px;font-weight:700;padding:10px 14px;border-radius:11px;
  border:1.5px solid var(--cizgi);background:#fff;color:var(--murek);cursor:pointer}
.kur-secim button.aktif{border-color:var(--mor);background:var(--mor);color:#fff}
.kur-cikti{background:#fff;border:2px solid var(--mor);border-radius:16px;padding:18px 20px;margin-top:16px}
.kur-cikti .et{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mor-yum);margin-bottom:7px}
.kur-cikti .cml{font-family:'Spectral',serif;font-size:19px;font-weight:600;color:var(--mor);line-height:1.5}

/* ── TİP LİSTESİ (§7 Enneagram) ── */
.tipler{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.tip{padding:16px 18px}
.tip .b{font-weight:800;color:var(--mor);font-size:15.5px;margin-bottom:4px}
.tip .a{font-size:14px;color:var(--gri)}

/* ── YAZAR SAYFASI (§10) ── */
.yazar-ust{display:flex;gap:26px;align-items:center;margin-bottom:8px}
.yazar-ust img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 22px rgba(59,24,102,.2);flex:none}
.rozetler{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.rozetler span{font-size:13px;font-weight:700;color:var(--mor);background:var(--mor-cokacik);
  border:1px solid var(--cizgi);padding:7px 13px;border-radius:999px}

/* ── KAYNAK LİSTESİ (§13) ── */
.kaynaklar li{margin-bottom:12px;line-height:1.6}
.kaynaklar a{color:var(--mor);font-weight:700}
.kaynaklar .destek{display:block;font-size:13px;color:var(--gri);font-style:italic;margin-top:3px}

/* ── MOBİL YAPIŞKAN CTA + KAPANIŞ + FOOTER ── */
.yapiskan{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(251,250,253,.96);backdrop-filter:blur(8px);border-top:1px solid var(--cizgi)}
.yapiskan a{width:100%}
.kapanis{text-align:center;padding:70px 0}
.kapanis .b2{font-family:'Spectral',serif;font-size:20px;margin-bottom:26px}
.kapanis-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer{border-top:1px solid var(--cizgi);padding:26px 0 110px;text-align:center;font-size:12.5px;color:var(--gri)}
footer a{color:var(--mor);font-weight:700;text-decoration:none}

@media(max-width:860px){
  section{padding:40px 0}
  .hero{padding:22px 0 30px}
  .bar-nav a:not(.wa){display:none}
  .menu-dugme{display:inline-block}
  /* [v607] 🔴 TELEFONDA YANA KAYMA — v603'ten beri BÜTÜN merkez sayfalarında
     vardı (390 px ekranda sayfa 457 px genişliyordu). Sebep: logo
     "white-space:nowrap" + uzun alt başlık; esnek kutu küçülemeyip üst çubuğu
     taşırıyordu. Telefonda alt başlık gizlenir, logo daralabilir. */
  .bar .dis{gap:8px}
  .logo{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .logo em{display:none}
  .giris-sec{grid-template-columns:1fr}
  .alti,.rehber-liste{grid-template-columns:1fr}
  .kul{grid-template-columns:1fr}
  .mehmet{flex-direction:column;text-align:center}
  .fark{padding:30px 20px}
  .yapiskan{display:block}
  .tablo,.kiyas{display:block;overflow-x:auto;white-space:normal}
  .adimlar{grid-template-columns:1fr}
  .tipler{grid-template-columns:1fr}
  .yazar-ust{flex-direction:column;text-align:center;gap:16px}
  .rozetler{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v646 — Mehmet'in dönüşüm brifi 30.08.2026] FOTOĞRAF YÜKLEME ÖNCESİ KATMAN
   Brifin KPI'ı: sayfa → fotoğraf yükleme oranı (%10,6 → %15+). Bu yüzden
   buradaki her öğe bilerek SESSİZDİR: izin cümlesi, fotoğraf rehberi ve
   kalite uyarısı CTA ile görsel olarak yarışmaz. Rehber kapalı gelir (§3:
   "kullanıcı bu rehberi okumadan da fotoğraf yükleyebilmeli").
   ═══════════════════════════════════════════════════════════════════════════ */
.izin-satir{font-size:12.5px;color:var(--gri);line-height:1.6;margin-top:10px;max-width:520px}
.izin-satir a{color:var(--mor);font-weight:700}
.foto-rehber-ac{display:inline-block;margin-top:10px;background:none;border:none;padding:0;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--mor);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.foto-rehber{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;padding:14px;
  border:1px solid var(--cizgi);border-radius:14px;background:#fff}
.foto-rehber .fr-b{font-size:13.5px;font-weight:800;margin-bottom:7px}
.foto-rehber .fr-b.iyi{color:#1F7A5A}
.foto-rehber .fr-b.zayif{color:#B23B2A}
.foto-rehber ul{margin:0;padding-left:17px}
.foto-rehber li{font-size:13px;color:var(--murek);line-height:1.7}
/* Kalite uyarısı — kırmızı DEĞİL: kullanıcı hata yapmadı, fotoğraf zayıf.
   Kırmızı burada suçlayıcı olur ve vazgeçirir (brif §4'ün tonu "olabilir"). */
.kalite-uyari{margin-top:14px;padding:15px;border:1.5px solid rgba(166,116,26,.35);
  border-radius:15px;background:#FFFAF0}
.kalite-uyari .ku-b{font-size:15.5px;font-weight:800;color:#8a6d1a;line-height:1.45}
.kalite-uyari .ku-a{font-size:14px;color:var(--murek);line-height:1.6;margin-top:7px}
.kalite-uyari .ku-dugmeler{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:13px}
/* "Yine de Devam Et" bilerek ikincil: birincil hamle daha iyi bir fotoğraf. */
.kalite-uyari .ku-devam{background:none;border:none;padding:6px 2px;font-family:inherit;
  font-size:13.5px;font-weight:700;color:var(--gri);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.kalite-uyari .ku-devam:hover{color:var(--murek)}

/* ══ [v646 §5] "BU ANALİZ NE DEĞİLDİR?" — küçük ama güçlü güven bloğu ══════
   Brif: "Bu bölüm ziyaretçiyi korkutacak kadar büyük olmasın. Ama güven
   arayan kişi kolayca görsün." Bu yüzden tam genişlik değil, dar kolon. */
.ne-degil{max-width:660px;margin:0 auto;padding:20px 22px;border:1px solid var(--cizgi);
  border-radius:18px;background:#fff}
.ne-degil .nd-b{font-family:'Spectral',serif;font-size:20px;font-weight:600;color:var(--mor);line-height:1.35}
.ne-degil .nd-a{font-size:14.5px;color:var(--murek);line-height:1.7;margin-top:10px}
.ne-degil .nd-isaret{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ne-degil .nd-isaret span{font-size:13px;font-weight:700;color:var(--gri);
  border:1px solid var(--cizgi);border-radius:99px;padding:6px 12px;background:var(--zemin)}

/* ══ [v646 §8] MOAT — "Bir fotoğrafla başlar. Ama fotoğrafta bitmez." ══════
   Dikey akış bilerek TEK KOLON: yatay kartlar "dört ayrı özellik" gibi
   okunuyordu; oysa anlatılan tek bir zincir. */
.zincir{max-width:520px;margin:22px auto 0}
.zincir .zh{border:1.5px solid var(--cizgi);border-radius:16px;background:#fff;
  padding:14px 16px;font-size:15.5px;font-weight:800;color:var(--murek);text-align:center}
.zincir .zh.son{border-color:var(--mor);background:var(--mor-cokacik);color:var(--mor)}
.zincir .zok{text-align:center;font-size:19px;color:var(--mor-yum);line-height:1;margin:7px 0}
.zincir-alt{max-width:660px;margin:20px auto 0;font-size:15px;color:var(--murek);line-height:1.7;text-align:center}

@media(max-width:520px){
  .foto-rehber{grid-template-columns:1fr;gap:10px}
  .ne-degil{padding:17px 16px}
  .ne-degil .nd-b{font-size:18.5px}
  .zincir .zh{font-size:14.5px;padding:12px 13px}
}

/* ══ [v646 — brif §19] DAR EKRAN (≤360px) HERO SIKIŞTIRMASI ════════════════
   Brif: "İlk mobil ekranda mümkünse şunlar aynı anda görülsün: H1 ·
   Uygulama indirme yok · 📸 CTA · Üyelik gerekmez. Fotoğraf CTA ekranın
   altına gömülmesin."
   320×640'ta (iPhone SE) ölçüldü: CTA ve altındaki satır katlanın altında
   kalıyordu. Aşağıdaki kısıtlamalar YALNIZ dar ekranda çalışır; 390 ve 430
   zaten geçiyordu ve dokunulmadı.
   🔴 Hiçbir metin SİLİNMİYOR — yalnız hero'daki gizlilik satırı bu genişlikte
   gizleniyor. Aynı vaat CTA kutusunda ("Fotoğraf işlenir, saklanmaz") ve
   SSS'te aynen duruyor, yani kullanıcı onu yine görüyor. */
@media(max-width:360px){
  .hero{padding:22px 0 20px}
  .hero h1{font-size:29px;line-height:1.16}
  .hero-p{font-size:14.5px;margin-bottom:4px}
  .hero-fark{margin:10px 0 2px;padding:9px 12px;font-size:14px;line-height:1.5}
  .hero-gizli{display:none}
  .eyebrow{margin-bottom:7px;font-size:11.5px}
  .demo.baslangic{margin-top:14px;padding:16px 14px 14px}
  /* Kutunun "Fotoğrafını yükle" başlığı bu genişlikte gizlenir: H1 zaten
     kelimesi kelimesine aynı cümleyi söylüyor, iki kez okutmanın bedeli
     CTA'nın katlanın altına inmesi oluyordu. Bilgi kaybı yok. */
  .demo.baslangic .demo-baslik{display:none}
  .baslangic-rozet{top:-11px;left:16px;font-size:10.5px;padding:5px 11px}
  .demo-sec{gap:7px}
  .demo-sec button{font-size:14px;padding:9px 6px}
  .yukle{margin-top:9px;padding:14px 12px}
  .yukle-ik{font-size:22px;margin-bottom:2px}
  .yukle-b{font-size:14.5px}
  .demo-alt{margin-top:9px;font-size:12.5px}
  .izin-satir,.foto-rehber-ac{margin-top:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v647] KATEGORİ SAVAŞ SAYFASI — Mehmet'in dil ve metodoloji revizyonu
   30.08.2026. Tasarım kuralı brifin kendisinden: metin HALK DİLİ olduğu için
   tipografi de ağır ve teknik değil, konuşma ritminde. Uzun paragraf yok;
   kısa satırlar, nefes alan boşluk.
   ═══════════════════════════════════════════════════════════════════════════ */
.fz-alt{font-family:'Spectral',serif;font-size:22px;line-height:1.55;color:var(--murek);margin:6px 0 14px;max-width:560px}
.fz-alt b{color:var(--mor);font-weight:600}
/* 🔴 Brif §2: "Bunlar küçük gri yazı olmasın. Özellikle mobilde görünür
   olsun." — bu yüzden gri mikro metin değil, çerçeveli renkli şerit. */
.uc-olumsuz{display:inline-block;margin:14px 0 4px;background:var(--mor);color:#fff;border-radius:99px;
  padding:10px 18px;font-size:14.5px;font-weight:800;letter-spacing:.01em;line-height:1.45}
.fz-metin{max-width:660px}
.fz-metin p{font-size:16.5px;line-height:1.75;color:var(--murek);margin:0 0 12px}
.fz-metin p:last-child{margin-bottom:0}
.fz-buyuk{font-size:30px;line-height:1.22;margin-bottom:2px}
.fz-buyuk-alt{font-family:'Spectral',serif;font-size:25px;font-style:italic;color:var(--mor);line-height:1.3;margin-bottom:16px}
/* Rakibin cümlelerini taklit eden örnekler — bilerek SOLGUN, çünkü
   anlatılan şey "bunlar boş" (rakip adı VERİLMEZ, sadece dil gösterilir). */
.fz-alinti{display:flex;flex-direction:column;gap:7px;margin:12px 0 14px}
.fz-alinti span{background:var(--zemin);border:1px dashed var(--cizgi);border-radius:12px;
  padding:10px 14px;font-family:'Spectral',serif;font-style:italic;font-size:16px;color:var(--gri)}
.fz-parca{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.fz-parca span{font-size:15.5px;color:var(--gri);border-left:3px solid var(--cizgi);padding:3px 0 3px 12px}
.fz-vurgu{font-family:'Spectral',serif;font-size:22px;font-weight:600;color:var(--mor);line-height:1.4}
.fz-final{margin-top:20px;font-family:'Spectral',serif;font-size:24px;font-weight:600;color:var(--mor);
  line-height:1.35;max-width:660px;border-top:2px solid rgba(59,24,102,.18);padding-top:16px}
.fz-sorular{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.fz-sorular span{font-size:16px;font-weight:700;color:var(--murek);padding-left:16px;position:relative}
.fz-sorular span::before{content:'—';position:absolute;left:0;color:var(--mor-yum)}

/* 478 nokta bloğu — görsel bir ŞEMADIR, gerçek bir kişinin çıktısı değil. */
.harita-kutu{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;margin-top:18px}
.harita-gorsel{background:#fff;border:1px solid var(--cizgi);border-radius:20px;padding:14px 10px 10px}
.yuz-harita{width:100%;height:auto;display:block}
.harita-not{text-align:center;font-size:11.5px;color:var(--gri);margin-top:6px}
.zincir-satir{margin-top:14px;font-size:15px;font-weight:800;color:var(--mor);
  background:var(--mor-cokacik);border-radius:14px;padding:12px 15px;line-height:1.6}
.zincir-satir span{color:var(--mor-yum);margin:0 4px}

/* "Mantıksal mı, duygusal mı?" örneği — moat'ın somut kanıtı */
.ornek-kutu{margin-top:20px;background:#fff;border:2px solid var(--mor);border-radius:20px;padding:20px;max-width:660px}
.ornek-kutu .ok-b{font-family:'Spectral',serif;font-size:23px;font-weight:600;color:var(--mor);line-height:1.3}
.ornek-kutu .ok-a{font-size:15.5px;line-height:1.7;color:var(--murek);margin-top:10px}
.ornek-kutu .ok-etiketler{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.ornek-kutu .ok-etiketler span{background:var(--mor-cokacik);border:1px solid rgba(59,24,102,.25);
  border-radius:99px;padding:7px 13px;font-size:14px;font-weight:700;color:var(--mor)}

/* 12 karakter yönü — altı çift */
.karakter-liste{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.karakter-liste .kk{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:16px 17px}
.karakter-liste .kk-b{font-size:16.5px;font-weight:800;color:var(--mor);line-height:1.35}
.karakter-liste .kk-a{font-size:14.5px;line-height:1.65;color:var(--murek);margin-top:8px}

/* Yol haritası — 🔴 TARİH YOK, yalnız yön (brif §7) */
.yol-haritasi{display:flex;align-items:center;gap:10px;margin:16px 0 6px;flex-wrap:wrap}
.yol-haritasi span{background:var(--mor);color:#fff;border-radius:12px;padding:8px 15px;font-size:17px;font-weight:800}
.yol-haritasi span:not(:first-child){background:var(--mor-cokacik);color:var(--mor);border:1.5px dashed rgba(59,24,102,.4)}
.yol-haritasi i{color:var(--mor-yum);font-style:normal;font-weight:800}
.talep-davet{margin-top:22px;border:1.5px dashed rgba(59,24,102,.3);border-radius:18px;
  padding:18px;background:rgba(59,24,102,.035);max-width:660px}
.talep-davet .td-b{font-family:'Spectral',serif;font-size:20px;font-weight:600;color:var(--mor);line-height:1.3}
.talep-davet .td-a{font-size:15px;color:var(--murek);line-height:1.65;margin:8px 0 14px}
.uc-etiket{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.uc-etiket span{background:var(--mor);color:#fff;border-radius:14px;padding:12px 20px;font-size:18px;font-weight:800}
.adimlar-6{grid-template-columns:repeat(3,1fr)}

@media(max-width:860px){
  .harita-kutu{grid-template-columns:1fr;gap:18px}
  .harita-gorsel{max-width:300px;margin:0 auto}
  .karakter-liste{grid-template-columns:1fr}
  .adimlar-6{grid-template-columns:1fr}
}
@media(max-width:520px){
  .fz-buyuk{font-size:25px}
  .fz-buyuk-alt{font-size:21px}
  .fz-alt{font-size:19px}
  .fz-final{font-size:20px}
  .fz-vurgu{font-size:19px}
  .uc-olumsuz{font-size:13.5px;padding:9px 14px}
  .uc-etiket span{font-size:16px;padding:10px 16px}
  .ornek-kutu{padding:16px}
  .ornek-kutu .ok-b{font-size:20px}
}

/* ══ [v647 §14] Fotoğraf aydınlatması — katmanlı ilk katman ═══════════════ */
.giz-adim{margin:12px 0 0;padding-left:20px}
.giz-adim li{font-size:16px;line-height:1.75;color:var(--murek);margin-bottom:10px}
.giz-kimlik{margin-top:26px;background:#fff;border:2px solid var(--mor);border-radius:18px;padding:20px}
.giz-kimlik .gk-b{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--mor-yum);margin-bottom:8px}
.giz-kimlik .gk-a{font-size:16px;font-weight:700;color:var(--murek);line-height:1.7}
.giz-kimlik .gk-a a{color:var(--mor)}
.giz-kimlik .gk-n{font-size:13px;color:var(--gri);line-height:1.65;margin-top:12px}

/* ═══ [v660 — Mehmet'in GSC uygulama paketi 02.09.2026] ═══════════════════
   §2 B2C → profesyonel köprüsü ve §7 modül seçim footer'ı.
   🔴 TASARIM KURALI, KODLA ZORLANIYOR: bunlar İKİNCİL çıkıştır. Mehmet:
   *"Bunlar secondary CTA. Fotoğraf yükleme ve WhatsApp CTA'sıyla
   yarışmayacak."* Bu yüzden burada .btn-mor/.btn-yesil YOK; zemin sade,
   yazı küçük, renk soluk. Dolu düğme görünümü verilirse kural çiğnenir. */
.pro-kopru{margin-top:34px;padding:20px 18px;border-radius:18px;
  background:var(--mor-cokacik);border:1px solid var(--cizgi)}
.pro-kopru h2{font-size:19px;margin-bottom:8px}
.pro-kopru p{font-size:14.5px;color:var(--gri);line-height:1.65;margin-bottom:14px}
.pro-kopru .pk-git{display:inline-block;font-size:14.5px;font-weight:800;color:var(--mor);
  text-decoration:none;border-bottom:2px solid var(--mor-yum);padding-bottom:2px}
.pro-kopru .pk-ikinci{display:block;margin-top:12px;font-size:13.5px;font-weight:700;
  color:var(--gri);text-decoration:none}
.pro-kopru .pk-ikinci:hover{color:var(--mor)}

/* §7 — modül seçim footer'ı. Analiz/test ekranının kritik CTA bölgesine
   KONMAZ; yalnız sayfa sonunda, footer'dan hemen önce yaşar. */
.modul-sec{margin:38px auto 0;max-width:860px;padding:22px 18px;border-top:1px solid var(--cizgi)}
.modul-sec .ms-b{font-size:16px;font-weight:800;color:var(--mor);margin-bottom:14px;
  font-family:'Spectral',serif}
.modul-sec .ms-liste{display:flex;gap:10px;flex-wrap:wrap}
.modul-sec a{flex:1 1 210px;display:block;background:#fff;border:1px solid var(--cizgi);
  border-radius:14px;padding:14px 15px;text-decoration:none;color:var(--murek)}
.modul-sec a:hover{border-color:var(--mor-yum)}
.modul-sec .ms-ad{font-size:14.5px;font-weight:800;color:var(--mor);line-height:1.35}
.modul-sec .ms-yol{font-size:12.5px;color:var(--gri);margin-top:4px}

/* ═══ [v660 §10 — ALINTILANABİLİR CEVAP KUTUSU] ══════════════════════════
   Mehmet'in GSC paketi §9-§10: *"Önce cevap. Sonra açıklama."* Hedef yalnız
   sıralanmak değil, AI cevaplarında KAYNAK GÖSTERİLMEK.
   🔴 Bilerek FAQ şeması VERİLMEDİ: Mehmet *"FAQ gibi görünmek zorunda değil,
   insan için yazılmış kısa cevap kutuları olabilir"* dedi; ayrıca Google
   FAQ zengin sonucunu daralttı ve v654'te tam bu yüzden bir şema tipini
   çıkarmıştık. Blok düz, okunur HTML — tarayıcı da model de aynı metni okur. */
.cevap-kutu{margin:26px 0;padding:18px 20px;border-radius:16px;background:#fff;
  border:1px solid var(--cizgi);border-left:4px solid var(--mor-yum)}
.cevap-kutu h3{margin:0 0 8px;font-size:16.5px;font-weight:800;color:var(--mor)}
.cevap-kutu p{margin:0;font-size:15px;line-height:1.7;color:var(--murek)}