/* yardim_core.css — "Nasil yapilir?" dugmeleri ve video penceresi.
   Dugme, videosu YOKKEN gorunmez (.ydok sinifi yardim.js tarafindan eklenir);
   boylece butonlari once koyup videolari sonra ekleyebiliyoruz.
   24 Eyl (D2): renk --accent (ferah palet); altin (#b99b62) acik zeminde 2.65:1 idi — AA alti. */
.ydbtn{display:none;align-items:center;gap:6px;border:1px solid var(--accent,var(--gold,#b99b62));
  background:transparent;color:var(--accent,var(--gold,#b99b62));border-radius:999px;
  padding:5px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;line-height:1.2}
.ydbtn.ydok{display:inline-flex}
.ydbtn:hover{background:var(--accent,var(--gold,#b99b62));color:#fff}
.ydbtn::before{content:'▶';font-size:9px;line-height:1}
.ydov{position:fixed;inset:0;z-index:400;background:rgba(18,15,11,.62);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.ydcard{background:var(--card,#fff);color:var(--ink,#1f1a14);width:100%;max-width:920px;
  border-radius:16px 16px 0 0;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.ydhead{display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--line,rgba(0,0,0,.10))}
.ydhead b{font-size:14.5px;line-height:1.3}
.ydx{margin-left:auto;flex:none;border:1px solid var(--line,rgba(0,0,0,.12));background:transparent;
  color:inherit;border-radius:999px;width:30px;height:30px;font:inherit;font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ydbody{display:flex;flex-direction:column;gap:0;overflow:auto;-webkit-overflow-scrolling:touch}
/* Videolar dikey (telefon cekimi); genis kartta yanlarda bosluk kaliyor.
   Bosluk siyah birakilirsa 'bozuk kutu' gibi duruyor — sayfanin kendi
   zemin rengini kullanip videonun kagidiyla kaynastiriyoruz. */
.ydvid{background:var(--bg,#f5f1e8);display:flex;justify-content:center;align-items:center;
  padding:10px}
/* Olcu CERCEVEDE, videoda degil: video kutuyu tam doldurur, boyutu hicbir zaman
   sonradan degismez. Video bir telefon ekrani goruntusu oldugu icin cerceveleyip
   golge veriyoruz — yanindaki alan "bos kalmis" degil, bilerek birakilmis pay
   gibi okunsun. Cerceveye KESIN yukseklik sart: video mutlak konumlu olmadigi
   halde aspect-ratio tek basina bazi duzenlerde 0 genislik uretebiliyor. */
.ydvid video{display:block;width:auto;max-width:100%;max-height:64vh;
  border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.14);background:var(--bg,#f5f1e8)}
.ydsteps{list-style:none;margin:0;padding:10px 14px 14px;counter-reset:yd}
.ydstep{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:9px;
  font-size:13px;line-height:1.5;cursor:pointer;border:1px solid transparent}
.ydstep:hover{background:rgba(169,78,51,.06)}
.ydstep.on{background:rgba(169,78,51,.10);border-color:rgba(169,78,51,.38);font-weight:600}
.ydt{flex:none;font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:800;
  color:var(--accent,var(--gold,#b99b62));padding-top:2px;min-width:32px}
.ydnote{padding:0 15px 14px;font-size:12px;color:var(--ink2,#6f675a);line-height:1.55}
@media(min-width:860px){
  /* Videolar dikey (9:19.5 telefon cekimi). Kart 920 px'e sabitlenince video
     sutunu 620 px oluyor ama video yalniz ~310 px — yaninda yari yariya bos
     alan kaliyordu (31 Agu geri bildirimi). Cozum: once videonun boyutunu
     belirle (yukseklik), kartin genisligi ONUN ardindan gelsin. */
  .ydov{align-items:center;padding:24px}
  .ydcard{border-radius:16px;max-height:88vh;width:auto;max-width:min(96vw,720px)}
  .ydbody{flex-direction:row;align-items:stretch}
  .ydvid{flex:0 0 auto;min-width:0;padding:0}
  .ydvid video{height:min(74vh,700px);width:auto;max-height:none;max-width:44vw}
  .ydsteps{flex:1 1 320px;border-left:1px solid var(--line,rgba(0,0,0,.10));overflow:auto}
  .ydnote{max-width:none}
}