/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP KONUŞMALAR SEKMESİ (1 Eki 2026 · ikinci tur)
   DESIGN.md sözleşmesi: yalnız tema değişkenleri, tek vurgu (--vurgu),
   anlam renkleri yalnız küçük işaretlerde, hareket --t1/--t2/--t3, iki eğri.
   Bileşen tema ADINA bakmaz. Telefonda liste ya da sohbet (tek sütun),
   980 px üstünde ikisi yan yana.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── sayfa kabı ve alt çubuk ─────────────────────────────────────────────── */
#whatsapp{flex:1;min-height:0;overflow:hidden;flex-direction:column;padding:0}
#alt[data-sayfa="whatsapp"] #dgm,#alt[data-sayfa="whatsapp"] #durumSatir,#alt[data-sayfa="whatsapp"] #kureSatir,
#alt[data-sayfa="whatsapp"] #krkDgm,#alt[data-sayfa="whatsapp"] #sesDgm,#alt[data-sayfa="whatsapp"] #canliBas,
#alt[data-sayfa="whatsapp"] #neredeyim{display:none}
#alt[data-sayfa="whatsapp"][data-canli="1"] #kureSatir,#alt[data-sayfa="whatsapp"][data-canli="1"] #canliBas{display:flex}
#alt[data-sayfa="whatsapp"]:not([data-canli="1"]) #slot{display:none}
#alt[data-sayfa="whatsapp"] #slot{min-height:0;margin-bottom:2px}
/* Altı sekme: hap altıda bir genişlikte, aynı kaymayla. */
#lozenge{width:calc((100% - 18px) / 6)}
#alt[data-sayfa=whatsapp] #lozenge{transform:translateX(calc(500% + 10px))}
@media (max-width:979px){
  #sekme{width:min(480px, calc(100% - 24px))}
  /* Sohbet açıkken alt çubuk ve üst başlık gizlenir: konuşma, yazma kutusu ve
     klavye için yer. Sayfa değişince data-sayfa değiştiği için kural düşer. */
  body.waIcerde #alt[data-sayfa="whatsapp"]:not([data-canli="1"]){display:none}
  body.waIcerde:has(#alt[data-sayfa="whatsapp"]) #bas{display:none}
  body.waIcerde .wkSBas{padding-top:calc(8px + env(safe-area-inset-top))}
  body.waIcerde .wkYaz{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  body.wkKlavye .wkYaz{padding-bottom:8px}
}

.wk{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}
.wkSol,.wkSag{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.wk.icerde .wkSol{display:none}
.wk:not(.icerde) .wkSag{display:none}
@media (min-width:980px){
  #whatsapp{grid-area:ana;min-height:0}
  .wk{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  .wk .wkSol,.wk.icerde .wkSol,.wk .wkSag,.wk:not(.icerde) .wkSag{display:flex}
  .wkSol{border-right:1px solid var(--cizgi)}
  .wk .wkGeri{display:none}
  /* Kenar çubuğundaki sekmeler: altı sekme tek sırada sığmıyor (38 px),
     iki sıra üç sütun. Hap aynı ızgarada iki eksende kayar. */
  body:not(:has(#serit[hidden])) #sekme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
  body:not(:has(#serit[hidden])) #lozenge{width:calc((100% - 12px) / 3);height:calc((100% - 10px) / 2);bottom:auto}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=projeler] #lozenge,body:not(:has(#serit[hidden])) #alt[data-sayfa=oda] #lozenge{transform:translate(calc(100% + 2px),0)}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=isler] #lozenge,body:not(:has(#serit[hidden])) #alt[data-sayfa=makine] #lozenge{transform:translate(calc(200% + 4px),0)}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=rutinler] #lozenge{transform:translate(0,calc(100% + 2px))}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=ekip] #lozenge{transform:translate(calc(100% + 2px),calc(100% + 2px))}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=whatsapp] #lozenge{transform:translate(calc(200% + 4px),calc(100% + 2px))}
  body:not(:has(#serit[hidden])) #serit{padding-bottom:124px}
  body:has(#serit[hidden]) #sekme{width:min(480px, calc(100% - 24px))}
}
/* Üçüncü sütun (Şu an) WhatsApp'ta kapalı: Görevler ve Ekip'teki gibi, sohbet geniş kalsın. */
@media (min-width:1200px){
  body:has(#alt[data-sayfa="whatsapp"]){--sag:0px}
  body:has(#alt[data-sayfa="whatsapp"]) #sag{display:none}
}

/* ── üst: başlık ve bölümler ─────────────────────────────────────────────── */
.wkUst{flex-shrink:0;padding:10px 14px 8px}
.wkBaslik{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 10px}
.wkBaslik h1{font:600 var(--y8)/1 var(--yzt-bas);letter-spacing:-.035em;color:var(--mt)}
.wkUstDgm{display:flex;gap:6px}
.wkIkon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:0;border-radius:999px;
  background:var(--cam2);color:var(--mt);cursor:pointer;transition:transform var(--t1) var(--cik),background var(--t1) var(--cik)}
.wkIkon:active{transform:scale(.94)}
@media (hover:hover){ .wkIkon:hover{background:color-mix(in srgb,var(--mt) 10%,var(--cam2))} }
.wkSvg{width:20px;height:20px;fill:currentColor}
.wkMiniSvg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.wkAg{margin:0 2px 8px;padding:7px 12px;border-radius:10px;background:color-mix(in srgb,var(--dikkat) 14%,var(--cam));color:var(--mt);font-size:var(--y1)}
.wkAg[hidden]{display:none}
.wkSeg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--cam);box-shadow:var(--glg)}
.wkSeg button{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:0 6px;border:0;border-radius:999px;
  background:transparent;color:var(--or);font:600 var(--y2)/1 var(--yzt);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background var(--t2) var(--cik),color var(--t2) var(--cik)}
.wkSeg button.secili{background:color-mix(in srgb,var(--mt) 9%,var(--cam));color:var(--mt)}
.wkSay{min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--vurgu-dolgu);color:#fff;font:600 var(--y0)/17px var(--yzt);text-align:center}
.wkSay.kotu{background:var(--uyari-dolgu)}
.wkSay.sakin{background:var(--cam2);color:var(--or)}

/* ── sol gövde ───────────────────────────────────────────────────────────── */
.wkGovde{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 10px 14px;display:flex;flex-direction:column}
.wkAraKutu{position:relative;margin:2px 4px 8px}
.wkAraKutu input{width:100%;border:0;border-radius:12px;padding:10px 12px 10px 36px;font:500 16px var(--yzt);background:var(--cam);color:var(--mt);box-shadow:var(--glg);outline:0}
.wkAraKutu input:focus-visible{box-shadow:0 0 0 2px var(--vurgu)}
.wkAraSvg{position:absolute;left:11px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:var(--sn);pointer-events:none}
.wkCipler{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 4px 8px}
.wkCipler.sol{margin:-2px 0 12px}
.wkCipBosluk{flex:1}
.wkCip{border:0;border-radius:999px;padding:7px 11px;min-height:32px;background:var(--cam2);color:var(--or);font:600 var(--y1)/1 var(--yzt);cursor:pointer;white-space:nowrap;
  transition:background var(--t1) var(--cik),color var(--t1) var(--cik)}
.wkCip b{color:var(--mt)}
.wkCip.secili{background:color-mix(in srgb,var(--mt) 14%,var(--cam));color:var(--mt)}
.wkCip.vurgu{background:var(--vurgu-dolgu);color:#fff}
.wkCip.sade{background:transparent;box-shadow:inset 0 0 0 1px var(--cizgi)}
.wkSec{border:0;border-radius:999px;padding:7px 10px;min-height:32px;background:var(--cam2);color:var(--or);font:600 var(--y1) var(--yzt);max-width:100%}

.wkListe{display:flex;flex-direction:column;gap:2px}
.wkListe.kucuk{max-height:34dvh;overflow-y:auto;margin:2px 0 10px}
.wkSatir{display:flex;align-items:center;gap:11px;width:100%;min-height:62px;padding:9px 10px;border:0;border-radius:14px;background:transparent;color:var(--mt);
  text-align:left;cursor:pointer;font:inherit;transition:background var(--t1) var(--cik);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (hover:hover){ .wkSatir:hover{background:color-mix(in srgb,var(--mt) 4%,transparent)} }
.wkSatir:active{background:color-mix(in srgb,var(--mt) 7%,transparent)}
.wkSatir.secili{background:color-mix(in srgb,var(--mt) 8%,var(--cam))}
.wkSatir.kisi{min-height:54px}
.wkOrta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wkSatirUst,.wkSatirAlt{display:flex;align-items:center;gap:6px;min-width:0}
.wkSatirUst b{flex:1;min-width:0;font-size:var(--y3);font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkSatirUst time{flex-shrink:0;font-size:var(--y0);color:var(--sn);font-variant-numeric:tabular-nums}
.wkSatir.okunmamis .wkSatirUst time{color:var(--vurgu);font-weight:600}
.wkHatEt{flex-shrink:0;font:600 var(--y0)/1 var(--yzt);color:var(--sn);padding:2px 5px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--cizgi)}
.wkOnizleme{flex:1;min-width:0;font-size:var(--y2);color:var(--sn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkSatir.okunmamis .wkOnizleme{color:var(--or)}
.wkOnizleme mark{background:color-mix(in srgb,var(--vurgu) 22%,transparent);color:inherit;border-radius:3px}
.wkOkunmamis{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--vurgu-dolgu);color:#fff;font:600 var(--y0)/20px var(--yzt);text-align:center}
.wkHazirCip{flex-shrink:0;font:600 var(--y0)/1 var(--yzt);padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--vurgu) 16%,var(--cam));color:var(--vgY)}
.wkMiniIsaret{flex-shrink:0;display:inline-flex;color:var(--sn2)}
.wkMiniIsaret.vurgu{color:var(--vgY)}
.wkAraBaslik{font:600 var(--y1)/1.2 var(--yzt);color:var(--sn);margin:14px 10px 4px}
.wkBosListe{padding:28px 18px;text-align:center;color:var(--sn);font-size:var(--y2);line-height:1.5}
.wkBosListe b{color:var(--or)}
.wkIpucu{font-size:var(--y1);color:var(--sn);line-height:1.45;margin:0 10px 8px}
.wkUyari{margin:8px 4px;padding:10px 14px;border-radius:12px;background:var(--cam);box-shadow:var(--glg);color:var(--uyariY);font-size:var(--y2)}
.wkBag{border:0;background:transparent;padding:6px 4px;min-height:30px;color:var(--vurgu);font:600 var(--y1)/1 var(--yzt);cursor:pointer}
.wkBag.tehlike{color:var(--uyariY)}
.wkBag.hepsi{align-self:flex-start;margin:0 8px 4px}
.wkYukleniyor{display:flex;justify-content:center;gap:6px;padding:30px}
.wkYukleniyor i,.wkYaziyor i{width:7px;height:7px;border-radius:50%;background:var(--sn2);animation:wkNokta 1.2s var(--cik) infinite}
.wkYukleniyor i:nth-child(2),.wkYaziyor i:nth-child(2){animation-delay:.15s}
.wkYukleniyor i:nth-child(3),.wkYaziyor i:nth-child(3){animation-delay:.3s}
@keyframes wkNokta{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* avatar: proje kimlik renkleri, yalnız küçük işaret olarak */
.wkAvatar{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font:600 var(--y2)/1 var(--yzt);letter-spacing:0;background:color-mix(in srgb,var(--s1) 16%,var(--cam));color:var(--s1y)}
.wkAvatar.s2{background:color-mix(in srgb,var(--s2) 16%,var(--cam));color:var(--s2y)}
.wkAvatar.s3{background:color-mix(in srgb,var(--s3) 16%,var(--cam));color:var(--s3y)}
.wkAvatar.s4{background:color-mix(in srgb,var(--s4) 16%,var(--cam));color:var(--s4y)}
.wkAvatar.buyuk{width:52px;height:52px;font-size:var(--y4)}

/* ── kartlar: öneriler ve planlar ────────────────────────────────────────── */
.wkKartlar{display:flex;flex-direction:column;gap:8px;padding:2px 4px}
.wkBolum{font:600 var(--y1)/1.2 var(--yzt);color:var(--sn);margin:14px 4px 2px}
.wkOneriSatir,.wkPlanSatir{padding:12px 14px;border-radius:16px;background:var(--cam);box-shadow:var(--glg);display:flex;flex-direction:column;gap:8px}
.wkOneriKim{display:flex;align-items:center;gap:10px}
.wkOneriKim .wkAvatar{width:32px;height:32px;font-size:var(--y0)}
.wkOneriKim b{flex:1;min-width:0;font-size:var(--y3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkOneriKim time{font-size:var(--y0);color:var(--sn)}
.wkAlinti{font-size:var(--y2);color:var(--or);padding:6px 10px;border-left:2px solid var(--cizgi);background:var(--cam2);border-radius:0 8px 8px 0;white-space:pre-wrap;word-break:break-word}
.wkOneriMetinDuz{font-size:var(--y3);color:var(--mt);line-height:1.45;white-space:normal;word-break:break-word}
.wkOneriMetinDuz.kisa{max-height:8.5em;overflow-y:auto}
.wkOneriMetinDuz.bos{color:var(--sn);font-size:var(--y2)}
.wkGerekce{display:block;font-size:var(--y1);color:var(--sn);line-height:1.4}
.wkDgmSatir{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.wkDgmSatir.ust{justify-content:flex-start;margin:0 0 4px}
.wkDgm{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--cam2);color:var(--mt);
  font:600 var(--y2)/1 var(--yzt);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:transform var(--t1) var(--cik),background var(--t1) var(--cik)}
.wkDgm:active{transform:scale(.97)}
.wkDgm:disabled{opacity:.5;cursor:default}
.wkDgm.ana{background:var(--vurgu-dolgu);color:#fff}
.wkDgm.tehlike{color:var(--uyariY)}
@media (hover:hover){ .wkDgm:not(.ana):not(:disabled):hover{background:color-mix(in srgb,var(--mt) 10%,var(--cam2))} }
.wkPlanUst{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wkPlanUst time{font:600 var(--y2)/1.2 var(--yzt);color:var(--mt);font-variant-numeric:tabular-nums;margin-right:auto}
.wkDurumCip{font:600 var(--y0)/1 var(--yzt);padding:4px 7px;border-radius:7px;background:var(--cam2);color:var(--or)}
.wkDurumCip.onay_bekliyor{color:var(--dikkat)}
.wkDurumCip.hata{color:var(--uyariY)}
.wkDurumCip.gonderildi{color:var(--basari)}
.wkDurumCip.kuyrukta{color:var(--vgY)}
.wkPlanKim{font-size:var(--y3);font-weight:600;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkPlanMetin{font-size:var(--y2);color:var(--or);white-space:pre-wrap;word-break:break-word}
.wkPlanSatir.iptal,.wkPlanSatir.gonderildi{opacity:.78}
.wkHataYazi{display:block;font-size:var(--y1);color:var(--uyariY);line-height:1.4}
.wkUyariYazi{color:var(--dikkat)}
.wkNotYazi{display:block;font-size:var(--y1);color:var(--sn);line-height:1.45;margin:2px 0 10px}

/* seçim kipi (toplu mesaj) */
.wkKutu{flex-shrink:0;width:24px;height:24px;margin:0 9px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--sn2);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.wkKutu.dolu{background:var(--vurgu-dolgu);box-shadow:none}
.wkSecimBar{position:sticky;bottom:0;margin:10px 0 0;padding:10px 12px;border-radius:16px;background:var(--cam);box-shadow:var(--glg2);display:flex;align-items:center;gap:8px}
.wkSecimBar[hidden]{display:none}
.wkSecimBar span{flex:1;font:600 var(--y2)/1.2 var(--yzt);color:var(--mt)}

/* ── sağ: sohbet ─────────────────────────────────────────────────────────── */
.wkBos{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;color:var(--sn)}
.wkBos[hidden]{display:none}
.wkBos b{display:block;font-size:var(--y4);color:var(--or);margin:10px 0 4px}
.wkBos p{font-size:var(--y2);max-width:300px}
.wkBosSvg{width:34px;height:34px;fill:var(--sn2)}
.wkSohbet{flex:1;min-height:0;display:flex;flex-direction:column}
.wkSohbet[hidden]{display:none}
.wkSBas{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--cizgi)}
.wkKimDgm{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--mt);text-align:left;padding:2px 4px;border-radius:12px;cursor:pointer;font:inherit}
.wkKimDgm .wkAvatar{width:38px;height:38px}
.wkKim{min-width:0;display:flex;flex-direction:column;gap:2px}
.wkKim b{font-size:var(--y4);font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkKim small{font-size:var(--y1);color:var(--sn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkKaydetIpucu{font-style:normal;font:600 var(--y0)/1 var(--yzt);color:var(--vurgu);margin-left:4px;vertical-align:2px}
.wkAiDgm{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 11px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cam2);color:var(--or);font:600 var(--y1)/1 var(--yzt);white-space:nowrap}
.wkAiDgm.taslak{background:color-mix(in srgb,var(--vurgu) 12%,var(--cam));color:var(--vgY)}
.wkAiDgm.otomatik{background:var(--vurgu-dolgu);color:#fff}

.wkAkis{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.wkEski{display:flex;justify-content:center;margin:2px 0 6px}
.wkGun{display:flex;justify-content:center;margin:10px 0 4px}
.wkGun span{font:600 var(--y0)/1 var(--yzt);color:var(--sn);padding:5px 10px;border-radius:999px;background:var(--cam2)}
.wkBalon{max-width:min(82%,560px);padding:7px 10px 5px;border-radius:16px;background:var(--cam);box-shadow:var(--glg);align-self:flex-start}
.wkBalon.yeni{animation:wkGel var(--t2) var(--cik) both}
.wkBalon.giden{align-self:flex-end;background:color-mix(in srgb,var(--vurgu) 13%,var(--cam))}
.wkBalon.ard{margin-top:-3px}
.wkBalon.hata{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--uyari) 55%,transparent)}
.wkBalon.planli{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--vurgu) 45%,var(--cizgi));border-radius:16px}
.wkBalon.planli.hata{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--uyari) 55%,transparent)}
.wkBalon.planli.onay_bekliyor{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dikkat) 55%,transparent)}
@keyframes wkGel{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wkMetin{font-size:var(--y4);line-height:1.4;color:var(--mt);white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.wkMetin a{color:var(--vurgu);text-decoration:underline;text-underline-offset:2px}
.wkMedya{display:inline-flex;align-items:center;gap:6px;color:var(--sn);font-size:var(--y3)}
.wkBalonAlt{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:2px}
.wkBalonAlt time{font-size:var(--y0);color:var(--sn);font-variant-numeric:tabular-nums}
.wkEt{font:600 var(--y0)/1 var(--yzt);color:var(--sn)}
.wkEt.ai{color:var(--vgY)}
.wkEt.no{font-weight:500}
.wkDurum{display:inline-flex;color:var(--sn)}
.wkDurum.kotu{color:var(--uyariY)}
.wkDurum.bekliyor{color:var(--sn2)}
.wkHataSatir{font-size:var(--y1);color:var(--uyariY);margin-top:4px}
.wkPlanEt{display:flex;align-items:center;gap:5px;font:600 var(--y0)/1.2 var(--yzt);color:var(--vgY);margin-bottom:4px}
.wkBalon.planli.hata .wkPlanEt{color:var(--uyariY)}
.wkBalon.planli.onay_bekliyor .wkPlanEt{color:var(--dikkat)}
.wkPlanEylem{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;margin-top:4px}
.wkPlanEylem .wkBag{min-height:28px;padding:4px 2px}
.wkYaziyor{align-self:flex-start;display:flex;align-items:center;gap:4px;padding:9px 12px;border-radius:16px;background:var(--cam);box-shadow:var(--glg);margin-top:6px}
.wkYaziyor span{font-size:var(--y1);color:var(--sn);margin-left:6px}
@media (min-width:980px){ .wkBalon{max-width:min(70%,620px)} .wkAkis{padding:14px 22px 14px} }

/* ── alt: öneri ve yazma ─────────────────────────────────────────────────── */
.wkAlt{flex-shrink:0;border-top:1px solid var(--cizgi);background:var(--z1)}
.wkOneri{margin:8px 10px 0;padding:10px 12px;border-radius:14px;background:var(--cam);box-shadow:var(--glg);display:flex;flex-direction:column;gap:6px}
.wkOneriBas{display:flex;align-items:center;gap:6px;color:var(--vgY)}
.wkOneriBas b{font:600 var(--y2)/1.2 var(--yzt);color:var(--mt)}
.wkOneriBas small{font-size:var(--y1);color:var(--sn);flex:1}
.wkKapat{margin-left:auto;border:0;background:transparent;color:var(--sn);font:500 20px/1 var(--yzt);width:30px;height:30px;border-radius:999px;cursor:pointer}
.wkYaz{padding:6px 10px 8px}
.wkDuzenle{display:flex;align-items:center;gap:6px;padding:2px 4px 6px;font-size:var(--y1);color:var(--vgY)}
.wkDuzenle[hidden]{display:none}
.wkDuzenle span{flex:1;color:var(--or)}
.wkHazir{display:flex;gap:6px;overflow-x:auto;padding:0 2px 7px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wkHazir::-webkit-scrollbar{display:none}
.wkHazir[hidden]{display:none}
.wkHazir .wkCip{flex-shrink:0}
.wkYazNot{font-size:var(--y0);color:var(--sn);padding:0 4px 5px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.wkYazNot:empty{display:none}
.wkNoSec{display:inline-flex;align-items:center;gap:6px}
.wkNoSec select{border:0;border-radius:8px;padding:3px 6px;background:var(--cam2);color:var(--mt);font:600 var(--y0) var(--yzt)}
.wkYazSatir{display:flex;align-items:flex-end;gap:6px}
.wkYazSatir textarea{flex:1;min-width:0;border:0;border-radius:20px;padding:10px 14px;font:500 16px/1.35 var(--yzt);background:var(--cam);color:var(--mt);box-shadow:var(--glg);
  resize:none;outline:0;max-height:160px;min-height:42px}
.wkYazSatir textarea:focus-visible{box-shadow:0 0 0 2px var(--vurgu)}
.wkYazSatir .wkIkon{width:42px;height:42px}
.wkGonder{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border:0;border-radius:999px;background:var(--vurgu-dolgu);color:#fff;cursor:pointer;
  transition:transform var(--t1) var(--cik),opacity var(--t1) var(--cik)}
.wkGonder:active{transform:scale(.92)}
.wkYaz.kapali textarea,.wkYaz.kapali .wkGonder{opacity:.45;pointer-events:none}

/* ── sayfa (sheet) formları ──────────────────────────────────────────────────
   Pencere de alan da --cam renginde olunca kutular görünmüyordu (ilk tur
   ekran görüntüsü): form alanları hafif dolguyla ayrılır. */
.wkForm{display:flex;flex-direction:column;gap:2px}
#sheet .wkForm input:not([type=checkbox]),#sheet .wkForm textarea,#sheet .wkForm select{background:var(--cam2);margin-bottom:0}
#sheet .wkForm input:focus-visible,#sheet .wkForm textarea:focus-visible,#sheet .wkForm select:focus-visible{box-shadow:0 0 0 2px var(--vurgu)}
#sheet .wkForm select{width:100%;border:0;border-radius:14px;padding:12px 14px;font:500 16px var(--yzt);color:var(--mt)}
#sheet .wkForm textarea{width:100%;border:0;border-radius:14px;padding:12px 14px;font:500 16px/1.4 var(--yzt);color:var(--mt);outline:0;resize:vertical}
.wkKartUst{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.wkKartUst b{display:block;font-size:var(--y5);font-weight:600;letter-spacing:-.02em;color:var(--mt)}
.wkKartUst small{display:block;font-size:var(--y1);color:var(--sn);margin-top:3px;line-height:1.4}
.wkAlan{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;min-width:0}
.wkAlan[hidden]{display:none}
.wkAlan > span{font:600 var(--y1)/1.2 var(--yzt);color:var(--sn)}
.wkAlan > small{font-size:var(--y1);color:var(--sn);line-height:1.4}
.wkIkiAlan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wkSecim{display:flex;gap:4px;padding:3px;border-radius:14px;background:var(--cam2)}
.wkSecim button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;border-radius:11px;padding:9px 4px;background:transparent;color:var(--or);
  font:600 var(--y2)/1.1 var(--yzt);cursor:pointer;white-space:nowrap;transition:background var(--t1) var(--cik),color var(--t1) var(--cik)}
.wkSecim button small{font:500 var(--y0)/1.2 var(--yzt);color:var(--sn);text-align:center;white-space:normal}
.wkSecim button.secili{background:var(--cam);color:var(--mt);box-shadow:var(--glg)}
.wkAnahtarlar{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px}
.wkAnahtarlar.ust{margin:0 0 14px}
.wkAnahtarlar label{display:flex;align-items:flex-start;gap:10px;font-size:var(--y3);color:var(--mt);cursor:pointer;flex-wrap:wrap}
.wkAnahtarlar label small{flex-basis:100%;padding-left:30px;font-size:var(--y1);color:var(--sn);margin-top:-4px}
#sheet .wkAnahtarlar input[type=checkbox]{width:20px;height:20px;margin:0;padding:0;accent-color:var(--vurgu-dolgu);flex-shrink:0}
.wkOzetKutu{margin:4px 0 10px;padding:10px 12px;border-radius:14px;background:var(--cam2)}
.wkOzetBas{display:flex;align-items:center;gap:8px}
.wkOzetBas b{font-size:var(--y2);color:var(--mt)}
.wkOzetBas small{font-size:var(--y0);color:var(--sn);flex:1}
.wkOzetKutu p{font-size:var(--y2);color:var(--or);line-height:1.5;margin-top:4px}
.wkGelismis{margin:2px 0 6px;border-radius:14px;background:var(--cam2);padding:0 12px}
.wkGelismis summary{cursor:pointer;list-style:none;padding:12px 0;font:600 var(--y2)/1.2 var(--yzt);color:var(--or);display:flex;align-items:center;gap:6px}
.wkGelismis summary::-webkit-details-marker{display:none}
.wkGelismis summary::after{content:'';margin-left:auto;width:7px;height:7px;border-right:2px solid var(--sn);border-bottom:2px solid var(--sn);transform:rotate(45deg) translateY(-2px);transition:transform var(--t2) var(--cik)}
.wkGelismis[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.wkGelismis[open]{padding-bottom:4px}
.wkGelismis #sheet input,.wkGelismis .wkSecim{background:var(--cam)}
#sheet .wkGelismis .wkForm input,#sheet .wkGelismis input:not([type=checkbox]),#sheet .wkGelismis select{background:var(--cam)}
/* Kaydet düğmesi uzun formda hep görünür: pencerenin dibine yapışık. */
.wkForm > .wkDgmSatir.alt{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));z-index:2;margin:12px -14px calc(-14px - env(safe-area-inset-bottom));
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));background:var(--cam);box-shadow:0 -1px 0 var(--cizgi)}
.wkOnizlemeZaman{font-size:var(--y2);color:var(--mt);padding:8px 2px 0;min-height:1.5em}
.wkYonergeler{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.wkYonergeler .wkCip{min-height:36px;padding:8px 12px;font-size:var(--y2)}
.wkModSec{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;border:0;border-radius:14px;padding:12px 14px;margin:0 0 8px;
  background:var(--cam2);color:var(--mt);cursor:pointer;font:inherit}
.wkModSec b{font-size:var(--y4)}
.wkModSec small{font-size:var(--y1);color:var(--sn);line-height:1.4}
.wkModSec.secili{box-shadow:inset 0 0 0 2px var(--vurgu)}
.wkMenu{display:flex;flex-direction:column;gap:6px}
.wkMenuSatir{width:100%;text-align:left;border:0;border-radius:14px;padding:13px 14px;background:var(--cam2);color:var(--mt);font:500 var(--y3)/1.2 var(--yzt);cursor:pointer;margin:0 0 6px}
@media (hover:hover){ .wkMenuSatir:hover,.wkModSec:hover{background:color-mix(in srgb,var(--mt) 8%,var(--cam2))} }
.wkAlicilar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;min-height:24px}
.wkAlici{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 11px;border-radius:999px;background:color-mix(in srgb,var(--vurgu) 13%,var(--cam));color:var(--mt);font:600 var(--y1)/1 var(--yzt)}
.wkAlici button{border:0;background:transparent;color:var(--sn);font:600 16px/1 var(--yzt);width:22px;height:22px;border-radius:999px;cursor:pointer}
.wkHazirSatir{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;background:var(--cam2);margin:0 0 6px}
.wkHazirSatir > div{flex:1;min-width:0}
.wkHazirSatir b{display:block;font-size:var(--y2);color:var(--mt)}
.wkHazirSatir small{display:block;font-size:var(--y1);color:var(--sn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkHazirYeni{margin-top:10px}

.wkIkon:focus-visible,.wkGonder:focus-visible,.wkDgm:focus-visible,.wkCip:focus-visible,.wkSatir:focus-visible,.wkSeg button:focus-visible,.wkSecim button:focus-visible,
.wkBag:focus-visible,.wkKimDgm:focus-visible,.wkAiDgm:focus-visible,.wkModSec:focus-visible,.wkMenuSatir:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .wkBalon{animation:none} .wkYukleniyor i,.wkYaziyor i{animation:none;opacity:.6} }