/* tasarim-yol.css — Kendin Tasarla "Bana sorarak tasarla" (2026-10-27). Sitenin mürekkep / krem / limon / pembe dili.
   Telefon önce: seçenekler 2 sütun, dokunma hedefi ≥48 px; iz (seçilenler) yatay kayar, her iz düğmedir. */
.yol{padding:34px 40px 10px;max-width:1240px;margin:0 auto}
/* sayfa gece temasında (koyu duvar): başlık ve alt yazı açık renk; kutu içi kendi açık zemininde */
.yol-bas{font:400 clamp(26px,4.4vw,44px)/1.05 'Bowlby One','Archivo Black',sans-serif;letter-spacing:-1px;text-wrap:balance;color:var(--bg)}
.yol-bas span{color:var(--hot)}
.yol-alt-baslik{font-size:17px;margin-top:8px;max-width:640px;color:var(--bg);opacity:.88}
.yol-kutu{color:var(--ink)}
#yolKok{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.yol-iz{list-style:none;display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.yol-iz li{flex:0 0 auto;display:flex;align-items:center}
.yol-iz li+li::before{content:'';width:14px;height:2.5px;background:var(--ink);margin-right:8px;border-radius:2px;opacity:.5}
.yol-iz-b,.yol-iz-bas{min-height:44px;border:2.5px solid var(--ink);border-radius:999px;background:var(--lime);font:700 14px 'Familjen Grotesk',sans-serif;padding:0 14px;cursor:pointer;white-space:nowrap}
.yol-iz-bas{background:var(--paper)}
.yol-iz-b:hover{background:#fff}
.yol-kutu{background:var(--paper);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:14px}
.yol-adim{font:700 12.5px 'Familjen Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.yol-soru{font:400 clamp(21px,3.2vw,30px)/1.12 'Bowlby One','Archivo Black',sans-serif;letter-spacing:-.4px;text-wrap:balance}
.yol-secenekler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.yol-secenekler.uzun{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.yol-secenekler{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.yol-secenekler.uzun{grid-template-columns:1fr}}
.yol-sec-b{min-height:56px;border:2.5px solid var(--ink);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--ink);
  font:700 15.5px/1.2 'Familjen Grotesk',sans-serif;padding:10px 12px;text-align:left;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;overflow-wrap:anywhere}
.yol-sec-b:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--lime)}
.yol-sec-b:focus-visible,.yol-iz-b:focus-visible,.yol-iz-bas:focus-visible,.yol-ikincil:focus-visible,.yol-sec:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.yol-iskelet{height:56px;border-radius:16px;background:linear-gradient(90deg,#eee7d6 0%,#fff8e7 50%,#eee7d6 100%);background-size:200% 100%;animation:yol-parla 1.1s linear infinite}
@keyframes yol-parla{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.yol-iskelet{animation:none}.yol-sec-b{transition:none}}
.yol-serbest{display:flex;gap:10px;flex-wrap:wrap}
.yol-serbest input{flex:1 1 200px;min-height:48px;border:2.5px solid var(--ink);border-radius:14px;padding:0 14px;font:600 16px 'Familjen Grotesk',sans-serif;background:#fff;min-width:0}
.yol-ikincil{min-height:48px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;font:700 14.5px 'Familjen Grotesk',sans-serif;padding:0 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.yol-alt{display:flex;gap:10px;flex-wrap:wrap}
.yol-not{font-size:14px;opacity:.75;max-width:70ch}
.yol-fikirler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.yol-fikirler{grid-template-columns:1fr}}
.yol-fikir{border:2.5px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
@media (max-width:900px){.yol-fikir{flex-direction:row}.yol-fikir-on{flex:0 0 42%}}
@media (max-width:480px){.yol-fikir{flex-direction:column}.yol-fikir-on{flex:none}}
.yol-fikir-on{background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/18px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;min-height:180px;overflow:hidden}
.yol-fikir-on img{width:100%;max-width:220px;aspect-ratio:1;object-fit:contain}
.yol-fikir-on .dkk{flex:0 0 auto}
.yol-fikir-cizim{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.9);border:1.5px dashed rgba(26,26,26,.35);border-radius:10px;padding:5px 9px;max-width:100%;text-align:center}
.yol-fikir-yazi{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.yol-fikir-no{font:700 11.5px 'Familjen Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.yol-fikir-yazi h3{font:400 19px/1.15 'Bowlby One','Archivo Black',sans-serif;letter-spacing:-.3px}
.yol-fikir-yazi p{font-size:14.5px;line-height:1.45}
.yol-formul{font-weight:800;font-family:Georgia,'Times New Roman',serif;font-size:16px!important}
.yol-etiketler{display:flex;gap:6px;flex-wrap:wrap}
.yol-etiketler span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border:1.5px solid rgba(26,26,26,.25);border-radius:999px;padding:3px 10px}
.yol-etiketler i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink)}
.yol-sec{margin-top:auto;min-height:50px;border:3px solid var(--ink);border-radius:14px;background:var(--hot);color:#fff;font:400 16px 'Bowlby One','Archivo Black',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
@media (max-width:640px){.yol{padding:24px 16px 6px}.yol-kutu{padding:16px}}
/* istem yazarı + taslaklar */
.yol-taslak{display:flex;flex-direction:column;gap:8px;background:var(--lime);border:2.5px solid var(--ink);border-radius:16px;padding:12px}
.yol-taslak-b{min-height:56px;border:3px solid var(--ink);border-radius:14px;background:var(--ink);color:var(--lime);font:400 17px 'Bowlby One','Archivo Black',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--hot)}
.yol-taslak-b:disabled{opacity:.75;cursor:progress}
.yol-taslak .yol-not{opacity:.9}
.yol-hata{font-size:14px;font-weight:700;color:#b4122e}
.yol-hata a{color:inherit;text-decoration:underline}
.yol-tarif-etiket{font-weight:800}
.yol-fikir-on{position:relative}
.yol-fikir-on.ciziliyor img{opacity:.35;filter:grayscale(1)}
.yol-ciziliyor{position:absolute;inset:auto 10px 10px;text-align:center;font:700 13px 'Familjen Grotesk',sans-serif;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 10px;animation:yol-nabiz 1.2s ease-in-out infinite}
@keyframes yol-nabiz{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.yol-ciziliyor{animation:none}}
.yol-fikir-on.taslakli{background:#fff}
.yol-sec:disabled{opacity:.6;cursor:default}

/* 2026-10-28 canlı tarif (ağ + tarif) */
.yol-tarif{background:#fffdf5;border:2.5px solid var(--ink);border-radius:18px;padding:14px 16px;margin:0 0 14px;box-shadow:4px 4px 0 var(--lime);display:flex;flex-direction:column;gap:8px}
.yol-tarif-bas{margin:0;font:400 15px 'Bowlby One','Archivo Black',sans-serif;letter-spacing:.02em}
.yol-tarif-metin{margin:0;font-size:17px;line-height:1.5}
.yol-tarif-metin mark{background:var(--lime);color:var(--ink);border-radius:4px;padding:0 2px;animation:yolTarifYeni 1.2s ease-out}
@keyframes yolTarifYeni{from{background:#fff36b}}
@media (prefers-reduced-motion:reduce){.yol-tarif-metin mark{animation:none}}
.yol-tarif .yol-taslak{margin-top:4px}
.yol-tarif-duzenle{min-height:44px}
.yol-tarz-ornek{position:absolute;left:8px;top:8px;background:rgba(26,26,26,.82);color:#fff;font:600 11px/1.2 Arial,sans-serif;padding:4px 8px;border-radius:999px}

/* 2026-10-28 ikonlu seçenekler, tarz resimleri, renk paletleri, canlı tasarım eskizi */
.yol-ikon{font-size:1.25em;margin-right:2px}
.yol-secenekler.resimli{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.yol-secenekler.resimli .yol-sec-b{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;text-align:center;font-size:14px}
.yol-secenekler.resimli .yol-sec-b img{width:100%;max-width:96px;aspect-ratio:1;object-fit:contain;background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/14px 14px;border-radius:10px}
.yol-palet{display:inline-block;width:34px;height:20px;border-radius:999px;border:2px solid var(--ink);vertical-align:middle;margin-right:8px}
.yol-tarif.eskizli{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:14px;align-items:start}
@media (max-width:560px){.yol-tarif.eskizli{grid-template-columns:112px 1fr;gap:10px}.yol-eskiz{min-height:112px}.yol-eskiz .yol-ciziliyor{font-size:11px;left:4px;right:4px;bottom:4px}}
.yol-tarif-yazi{display:flex;flex-direction:column;gap:8px;min-width:0}
.yol-eskiz{position:relative;background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/16px 16px;border:2px solid var(--ink);border-radius:14px;min-height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.yol-eskiz img{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.yol-eskiz.ciziliyor img{opacity:.45;filter:blur(1px)}
.yol-eskiz .yol-ciziliyor{position:absolute;left:8px;right:8px;bottom:8px;text-align:center}
.yol-eskiz-no{position:absolute;left:8px;top:8px;background:rgba(26,26,26,.82);color:#fff;font:600 11px/1.2 Arial,sans-serif;padding:4px 8px;border-radius:999px}
.yol-canli-b{min-height:52px;border:3px solid var(--ink);border-radius:14px;background:var(--hot);color:#fff;font:400 16px 'Bowlby One','Archivo Black',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}

.yol-yeter{margin-top:10px;width:100%;min-height:44px}

/* 2026-10-28 söz yolu: harf stili örnekleri, söz önerileri, kendi sözün */
.yol-secenekler.yazili .yol-sec-b{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.yol-yazi-ornek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;color:var(--ink);max-width:100%;overflow:hidden;overflow-wrap:anywhere;font-size:19px!important}
.yol-secenekler.sozlu{grid-template-columns:1fr}
.yol-secenekler.sozlu .yol-sec-b{font-size:17px;text-align:left}
.yol-serbest.soz input{border-color:var(--hot);font-size:16px}
.yol-soz-metin{margin:4px 0;font:400 18px 'Bowlby One','Archivo Black',sans-serif;line-height:1.2}

/* 2026-10-28 TASARIM STÜDYOSU: sohbet + panel */
.yol.studyo{max-width:1240px}
.studyo-ic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:22px;align-items:start;margin-top:18px}
.studyo-ic #yolKok{margin-top:0}
.studyo-panel{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 28px);overflow:auto;padding:2px 6px 8px 2px}
.studyo-panel:empty{display:none}
@media (max-width:959px){.studyo-ic{grid-template-columns:1fr}.studyo-panel{position:static;max-height:none;overflow:visible;padding:0}}
.sohbet-gecmis{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.sh-cift{display:flex;flex-direction:column;gap:6px}
.sh-ai{align-self:flex-start;max-width:88%;background:var(--paper);border:2px solid var(--ink);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:15px}
.sh-ai::before{content:'🤖 '}
.sohbet-gecmis .yol-iz-b.sh-ben{align-self:flex-end;max-width:88%;min-height:44px;background:var(--lime);border:2px solid var(--ink);border-radius:16px 16px 4px 16px;padding:8px 14px;font-weight:700;text-align:right;box-shadow:none}
.sohbet-gecmis .yol-iz-b.sh-ben:hover{background:#b6f01f}
.sh-bas{align-self:center}
.yol-tarif.bos{opacity:.85;border-style:dashed}
.studyo-ayar,.studyo-oneri{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.studyo-bas{margin:0;font:400 15px 'Bowlby One','Archivo Black',sans-serif}
.pn-grup h4{margin:0 0 6px;font-size:14px}
.pn-secenekler{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pn-sec{flex:0 0 auto;min-height:44px;display:flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:6px 10px;font-weight:700;font-size:13px;white-space:nowrap}
.pn-tarz .pn-sec{flex-direction:column;width:84px;white-space:normal;text-align:center;padding:6px}
.pn-tarz .pn-sec img{width:64px;height:64px;object-fit:contain}
.pn-yazi .pn-sec{flex-direction:column;align-items:flex-start;max-width:150px}
.pn-sec.secili{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
.pn-sec:disabled{opacity:.6}
.pn-urunler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pn-urun{display:flex;flex-direction:column;gap:4px;border:2px solid var(--ink);border-radius:14px;padding:8px;background:#fff;text-decoration:none;color:var(--ink)}
.pn-urun img{width:100%;aspect-ratio:1;object-fit:contain}
.pn-urun-ad{font-weight:700;font-size:13px;line-height:1.2}
.pn-urun-fiyat{font-size:13px;color:var(--hot);font-weight:800}

/* 2026-10-28 Aşama 2: seçili tasarım, düzelt/benzer/farklı çipleri, sürüm şeridi, prova, yazı kontrolü, yazıdan */
.studyo-secim{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:4px 4px 0 var(--hot)}
.secim-on{position:relative;background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/16px 16px;border:2px solid var(--ink);border-radius:14px;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.secim-on img{width:100%;max-width:360px;aspect-ratio:1;object-fit:contain}
.secim-on.ciziliyor img{opacity:.45}
.secim-on .yol-ciziliyor{position:absolute;left:8px;right:8px;bottom:8px;text-align:center}
.secim-islem{display:flex;flex-direction:column;gap:8px}
.secim-duzelt{display:flex;gap:8px}.secim-duzelt input{flex:1;min-width:0;min-height:44px;border:2px solid var(--ink);border-radius:12px;padding:8px 10px;font:inherit}
.secim-cipler{display:flex;flex-wrap:wrap;gap:8px}
.secim-cip{min-height:44px;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:6px 14px;font-weight:700;font-size:14px;cursor:pointer}
.secim-cip.secili{background:var(--lime)}.secim-cip:disabled{opacity:.55;cursor:not-allowed}
.secim-siparis{width:100%}
.secim-surumler{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.secim-surum{width:52px;height:52px;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:2px;cursor:pointer}.secim-surum img{width:100%;height:100%;object-fit:contain}
.secim-kontrol{margin:0;font-weight:700;font-size:14px;border-radius:10px;padding:6px 10px;background:#f3f3f3}.secim-kontrol.iyi{background:#e6ffd1}.secim-kontrol.uyari{background:#ffe3e3}
.yol-yazidan{margin-top:6px;flex-wrap:wrap}.yol-yazidan label{flex-basis:100%}
.prova-perde{position:fixed;inset:0;z-index:9000;background:rgba(10,10,20,.66);display:flex;align-items:center;justify-content:center;padding:16px}
.prova-kutu{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:22px;padding:18px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.prova-kapat{position:absolute;right:10px;top:10px;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-size:18px;cursor:pointer}
.prova-sahne{display:flex;flex-direction:column;gap:8px}
.prova-zemin{position:relative;border-radius:16px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid var(--ink)}
.prova-laptop{background:linear-gradient(160deg,#c9ccd3,#9ea3ad)}
.prova-matara{background:linear-gradient(90deg,#2a7f6f,#3fb39c 50%,#2a7f6f);aspect-ratio:10/12}
.prova-defter{background:linear-gradient(135deg,#f0c36b,#e4a93b)}
.prova-sticker{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transform:rotate(-4deg)}

/* 2026-10-28 Aşama 3: fotoğraftan + 3D aktarım */
.foto-on{display:flex;justify-content:center;background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/16px 16px;border:2px solid var(--ink);border-radius:14px;padding:8px;min-height:120px;align-items:center}
.foto-on img{max-width:100%;max-height:240px;border-radius:10px}
.foto-riza{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px dashed rgba(26,26,26,.3);border-radius:12px;font-size:13px;line-height:1.45}
.foto-riza input{width:22px;height:22px;flex-shrink:0;accent-color:var(--hot);margin-top:1px}
.foto-riza a{color:var(--plum);text-decoration:underline}
.foto-tarz{flex-wrap:nowrap}
.yol-foto-b{margin-top:8px}
.secim-3d{width:100%}

/* 2026-10-28 Aşama 4: ders kartı panelde */
.ders-on{padding:10px;min-height:160px}
.ders-alan{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13px}
.ders-alan input{min-height:44px;border:2px solid var(--ink);border-radius:12px;padding:8px 10px;font:inherit;font-weight:500}
.ders-ac{width:100%}
/* 2026-10-28 telefon düzeltmesi: ızgara sütunları içerik kadar genişlemesin (panelin yatay listeleri sütunu ekrandan taşırıyor,
   sağa yaslı cevap balonları ekran dışına itiliyordu); öneri kartları dar ekranda küçük kalsın */
.studyo-ic>*{min-width:0}
.studyo-panel>*{min-width:0;max-width:100%}
.pn-urun img{max-height:180px}
@media (max-width:959px){.sh-ai,.sohbet-gecmis .yol-iz-b.sh-ben{max-width:92%}.pn-urunler{grid-template-columns:repeat(2,minmax(0,1fr))}.pn-urun img{max-height:130px}}
.sh-onceki{list-style:none}
.sh-onceki>details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--paper);opacity:.85}
.sh-onceki>details>ol{list-style:none;display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:0}

/* 2026-10-28 varyasyonlarla tasarla: 4'lü resim ızgarası */
.var-iz{margin:0;font-weight:700;font-size:13px;opacity:.8}
.var-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:960px){.studyo-sohbet .var-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}}
.var-kart{display:flex;flex-direction:column;gap:6px;align-items:center;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:6px;cursor:pointer;min-height:44px}
.var-kart img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:repeating-conic-gradient(#f3eee2 0 25%,#fffdf5 0 50%) 0 0/14px 14px}
.var-kart.secili{background:var(--lime);box-shadow:4px 4px 0 var(--hot);transform:translate(-2px,-2px)}
.var-kart.bos{justify-content:center;opacity:.6;font-size:13px;aspect-ratio:1}
.var-kart.iskelet{aspect-ratio:1;background:linear-gradient(90deg,#eee,#f8f8f8,#eee);background-size:200% 100%;animation:varIskelet 1.2s infinite linear}
@keyframes varIskelet{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.var-kart.iskelet{animation:none}}
.var-etiket{font-weight:700;font-size:13px;text-align:center;line-height:1.2}
.var-alt{display:flex;flex-direction:column;gap:8px}